Get tw as prop from component

[ddanielcruzz]

Hey there!

Is there a way to pass the tw prop down to other component without spreading the props?

I want something like this

const Component = ({tw}) => <section tw={tw}>hello</section>
...

<Component tw="text-green-500" />

I know this works

const Component = ({...props}) => <section {...props}>hello</section>
...

<Component tw="text-green-500" />

But I'd like to avoid it as I want to be specific about the props I pass to my component.

Thanks!

[ben-rogerson]

Hey!

Try passing className down onto the html element:

const Component = ({ className }) => <section {...{ className }}>hello</section>

<Component tw="text-green-500" />

[ddanielcruzz]

Thanks! 🎉

Any tips on how to use TypeScript there? I would think it's not possible but that's why I'm asking 😬

[ben-rogerson]

You can remove the red squigglies with a type/interface definition:

import "twin.macro";

type ComponentProps = {
  className?: string;
};

const Component = ({ className }: ComponentProps) => (
  <section {...{ className }}>hello</section>
);

;<Component tw="text-green-500" />;