Add some render features + render strategy #106
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
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 |
RobinMalfait
changed the title
RobinMalfait
force-pushed
the
render-strategy
branch
from
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.
RobinMalfait
force-pushed
the
render-strategy
branch
from
2779867
to
25b044d
Compare
RobinMalfait
force-pushed
the
render-strategy
branch
from
bf722e4
to
726fe21
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently we already have a
staticprop feature for theMenu ItemsandListbox 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 strategyfor certain components.StaticThe user is in controlRenderStrategyUnmountUnmount the treeHiddenHide the tree with thehiddenprop 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.