Additional props
To avoid unnecessary wrappers that just pass on some props to the rendered component or element, you can use the .attrs constructor. It allows you to attach additional props (or "attributes") to a component.
Usage
Create an input of type "checkbox" with twc:
const Checkbox = twc.input.attrs({
type: "checkbox",
})`appearance-none size-4 border-2 border-blue-500 rounded-sm bg-white`;Adapting attributes based on props
attrs accepts a function to generate attributes based on input props.
In this example, we create an anchor that accepts an $external prop and adds target and rel attributes based on its value.
import { twc, TwcComponentProps } from "react-twc";
type AnchorProps = TwcComponentProps<"a"> & { $external?: boolean };
// Accept an $external prop that adds `target` and `rel` attributes if present
const Anchor = twc.a.attrs<AnchorProps>((props) =>
props.$external ? { target: "_blank", rel: "noopener noreferrer" } : {},
)`appearance-none size-4 border-2 border-blue-500 rounded-sm bg-white`;
render(
<Anchor $external href="https://cva.style">Class Variance Authority</Anchor>
);