feat: add additional props support

[gregberge]

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</Link>
);

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
twc	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 23, 2023 3:24pm