-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
asChild props, like in Radix UI #5321
Comments
I'd recommend reading through our Advanced customization guide, in particular the section about consuming contexts. All of the contexts we provide are exported, so you can consume them in your own components. This makes it possible to reuse existing components you may have, either by modifying them to consume those contexts internally or by creating a small wrapper. For buttons in particular, we do rely on the normalization done by React Aria hooks internally, so when a component contains a button it expects that this is happening. Therefore using an arbitrary element would not be enough, it would need to include the hooks too. But, if you want to customize the element you can drop down to the hook API yourself, and as long as it consumes from We've discussed APIs like |
I think it is worth to add I've used |
asChild is not type safe, that's why it seems simpler. You can put any component in there even if it doesn't accept the right props or render the right element and it'll just be broken at runtime instead. What are you trying to achieve? There's usually another way to do it. Happy to help if you have a specific case. Make sure to read the guide linked above as well. |
I feel that
Mostly for styling, I have several components that covers specific area of css - Flex, Grid, Stack, Paint, Text etc. And then combine styles that I need by using |
In TypeScript you can't really specify the types of React children. Here's an example. As you can see,
I think another approach to this is to share the styles rather than components. That way they can be reused across different components. This example uses inline styles but you could use tailwind, css-in-js, etc. to achieve the same result. function flex(options) {
return {display: 'flex', gap: options.gap, flexDirection: options.direction, /* ... */ };
}
<ReactAriaComponent style={flex({...})} /> This approach is more granular - you are explicit about what is being shared (only styles, no events, or other hidden behaviors), and you have control over how multiple of these are merged together (with asChild you don't have control over how props from multiple components are merged). This also makes it easier to share styles between different raw DOM elements too, rather than being locked into a Another way to think about this is that components should be responsible for the behavior, semantics, and elements that are rendered, and styling should be passed into them. The component knows what is represents – a button, checkbox, switch, etc. – so it needs to control the rendered elements and behaviors. |
@devongovett thanks for detailed explanation. I wanted to emphasize that Also about passing functions to style components, I thought I tried this approach, but after that all my JSX turned into |
Provide a general summary of the feature here
Radix UI supports the asChild prop, which lets you provide a complete other component to serve in a certain role.
This would let you much more easily adopt React Aria Components within codebases that already have other components (but also some gotchas that users just have to be aware of). Especially for things like Buttons, etc.
🤔 Expected Behavior?
See the Radix docs: https://www.radix-ui.com/primitives/docs/guides/composition
😯 Current Behavior
You are limited to just using React Aria Components with itself.
💁 Possible Solution
No response
🔦 Context
Has been brought up as feedback in the past:
#2331 (comment)
https://news.ycombinator.com/item?id=35853692
💻 Examples
No response
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered: