feat: support react-aria-components render prop

[gregberge]

Fix #11

Render props

Some libraries like react-aria-components or Remix accepts a function as className. tsc 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 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>
);

[vercel[bot]]

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 24, 2023 0:38am

[izznatsir]

This approach is brilliant!

[gregberge]

@devongovett could you please give a review on this? What do you think?

https://twc-o3f01nfwe-argos-ci.vercel.app/docs/integrations/react-aria-components

[gregberge]

@izznatsir final implementation, please review :)

[gregberge]

I finally found a way to support it without any adapter 🎉

[ducan-ne]

@gregberge Do you think this API could be way better?

const Button = twc(AriaButton)<ButtonProps>(
  (props, { isPressed }) =>
    isPressed ? "bg-gray-700" : "bg-gray-500",
);

I'm uncertain about the technical aspect that is possible