Closed JoshuaKGoldberg closed 8 months ago
Should be able to use the asChild
to pass a polymorphic component lower down.
The As
component only has the props for your custom component, with the kobalte props on the parent.
Only issue is that you can't use the component
prop for your own.
You can see an example here https://github.com/jundaoapp/design/blob/752a6b9ae775de4ef217042832d56e34acfc89cc/src/components/popconfirm/index.tsx#L155 There should also be plenty more uses throughout the codebase.
Hopefully this works for you!
Side note for the proposed asProps
, I implemented something similar in the repo linked above. However it made a mess of the types and increased complexity by merging multiple layers of props.
Someone better than me at typescript could most probably make a better type definition, but for a single prop, making a bypass (such as asAs
with a better name) would be much simpler.
Closing this as the solution above works, for more information https://kobalte.dev/docs/core/overview/polymorphism.
Is your feature request related to a problem? Please describe.
I'm using https://kobalte.dev/docs/core/overview/polymorphism#the-as-prop to render something roughly like:
...where
Squiggly
is a component that requires passing in its own polymorphicas
prop. The kobalte.dev docs don't mention how to pass in a child
as` prop.asChild
is something else.Describe the solution you'd like
A way to pass an
as
prop to the child component (here,Squiggly
). Perhaps,asProps={ { as: "span" } }
?Describe alternatives you've considered
A dedicated prop like
asAs
? 😄Additional context
You can see a real-ish world code example here: https://github.com/JoshuaKGoldberg/dot-com/pull/97