Documentation
Guides
Render Props

Render props

Some libraries like react-aria-components (opens in a new tab) or Remix (opens in a new tab) accepts a function as className. twc supports render props out of the box.

Usage

In this example, we use a render props to change the class of a react-aria-components button (opens in a new tab) when the button is pressed.

import { twc } from 'react-twc'
import { Button as AriaButton, ButtonProps } from "react-aria-components";
 
const Button = twc(AriaButton)<ButtonProps>(
  (props) => (({ isPressed })) =>
    isPressed ? "bg-gray-700" : "bg-gray-500",
);
 
export default () => (
  <Button>Click me</Button>
);
Adapting based on propsAPI Reference