-
Notifications
You must be signed in to change notification settings - Fork 1.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
Add some render features + render strategy #106
Conversation
This pull request is being automatically deployed with Vercel (learn more). headlessui-react – ./packages/@headlessui-react🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/2h5pjg9gy headlessui-vue – ./packages/@headlessui-vue🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/5lnfwhxb2 |
534a019
to
2779867
Compare
Example use case: ```tsx // Some components have this API with an `innerRef`. The suggested approach is to use // `React.forwardRef` so that you get the actual `ref` value. However if you already have this // `innerRef` API than we can use the `refName="innerRef"` to give the `ref` prop a good name. It // defaults to `ref` so that it still works everywhere else. function MyButton({ innerRef, ...props }) { return <button ref={innerRef} {...props} /> } <Menu.Button as={MyButton} refName="innerRef" /> ```
+ use the unique __ symbol as a default value in the Props type for the omitable props.
2779867
to
25b044d
Compare
bf722e4
to
726fe21
Compare
Currently we already have a
static
prop feature for theMenu Items
andListbox Options
. The static option means that we don't show/hide those components based on the state. The user is in control. This can be handy if you want to add transition components around it so that you can transition and delay the unmounting.This PR will introduce a
render strategy
for certain components.Static
The user is in controlRenderStrategy
Unmount
Unmount the treeHidden
Hide the tree with thehidden
prop andstyle="display: none;"
We also made sure that the TypeScript types are XOR.
<Menu.Items />
<Menu.Items unmount />
<Menu.Items unmount={false} />
<Menu.Items static />
<Menu.Items unmount static />
This will fix #44
For the transition component the same rules will apply:
<Transition unmount={false} />
and<Transition.Child unmount={false} />
will keep everything in the DOM instead of unmounting.