-
-
Notifications
You must be signed in to change notification settings - Fork 28
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
Customize className
with props from underlying component className
render function.
#11
Comments
The problem is how |
className
with props from underlying component className render function.className
with props from underlying component className
render function.
Hello @izznatsir, good idea, I think we can make something to be usable with these libraries. I could take a look, feel free to submit a PR anyway. Keep it minds that it is not the main use-case and the library should be as a light as possible. |
I've updated the description with the proposed API. I'll try to submit a PR later. |
FYI, there's a function in React Aria Components for this. Haven't had time to add to the docs yet (was added very last minute). import {composeRenderProps} from 'react-aria-components';
<RACButton className={composeRenderProps(props.className, className => twMerge('...', className))} /> |
@devongovett do you have suggestion of an API to fully support react-aria-components in |
As I understand it should be possible to return a function as a className, so this should work right? const Button = twc(RACButton )(props => renderProps => ['flex px-2', renderProps.isHovered ? 'bg-blue-700' : 'bg-blue-600']); |
Actually, it won't work. Because, the renderProps is received at component render time instead of template creation time. To support this pattern, the className evaluation needs to executed at component render time by passing in a render function to the className prop instead of template creation time. But, I realized that So, this feature is not required to works with headless ui lib such as |
@izznatsir I just submitted a PR #20, could you take a look? 👀 |
🚀 Feature Proposal
Some components from
react-aria-components
accept a function asclassName
prop value. The function will receive the render props. So, it basically a render function forclassName
.react-twc
supports customizingclassName
via props, might as well mergeclassName
render props from such components with the transient props. I use this pattern a lot while wrappingreact-aria-components
.Motivation
To properly customize the produced
className
using the underlyingclassName
render props.Example
Without
react-twc
:With
react-twc
:Pitch
By supporting
classname
render function,react-twc
will be fully compatible with component library such asreact-aria-components
andheadlessui
.The text was updated successfully, but these errors were encountered: