Apply `as` in advance

I’m looking to achieve something similar to styled(Component). I really need to find out the types for the props when as is applied.

// imagine this does something fancy or stateful
const MyComponent = (props) => <div {...props}  />;

const Box = createBoxWithAtomsProp(atoms);
const AsBox = (props/*: Calculate Me */) => <Box {...props} as={MyCompent} />

Trying a few things with little success.

[TheMightyPenguin]

@waynevanson sorry for the delay here, you can solve this by doing something like:

const Button = (props: { text: string } & React.ComponentProps<"button">) => {
  return <button {...props}>{props.text}</button>;
};

const ButtonAsBox = (
  props: React.ComponentProps<typeof Box> & React.ComponentProps<typeof Button>
) => <Box as={Button} {...props} />;

// And then use it like:
< ButtonAsBox background="yellow" padding="extraLarge" text="Hello" />

The important part here is using React.ComponentProps to get the props from both Box and the other component you’re interested in!

Also, a useBox hook will be coming soon that will make using the Box props in other components a bit easier.

I’d also recommend using Box directly of that other component if you’re in control of that, as Box is meant to be used as a styling primitive inside of our apps, I recommend reading the FAQ section in our READMe (just added ✨).

Closing this @waynevanson, please feel free to reopen if this didn’t help.

[waynevanson]

Great work, I’ve got nothing more to add!