huanld/headlessui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update React Transition docs (#203)

Browse Source
This commit is contained in:
Robin Malfait
2021-01-22 18:35:26 +01:00
committed by GitHub
parent 5fb605205d
commit ab820ded09
1 changed files with 4 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/@headlessui-react/README.md
+4 -33
View File
@@ -144,31 +144,6 @@ function MyComponent() {
}
```
If you'd prefer not to render an additional element at all, you can pass your children as a function instead which will receive a `ref` that you need to attach to your root node:
```tsx
import { Transition } from '@headlessui/react'
import { useState } from 'react'
function MyComponent() {
const [isOpen, setIsOpen] = useState(false)
return (
<>
<button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
<Transition
show={isOpen}
// ...
>
{ref => <div ref={ref}>{/* Your content goes here*/}</div>}
</Transition>
</>
)
}
```
Be sure to attach the `ref` or your transitions will not work correctly.
### Animating transitions
By default, a `Transition` will enter and leave instantly, which is probably not what you're looking for if you're using this library.
@@ -317,7 +292,7 @@ function MyComponent({ isShowing }) {
| `show` | Boolean | Whether the children should be shown or hidden. |
| `as` | String Component _(Default: `'div'`)_ | The element or component to render in place of the `Transition` itself. |
| `appear` | Boolean _(Default: `false`)_ | Whether the transition should run on initial mount. |
| `unmount` | Boolean _(Default: `true`)_ | Whether the element should be unmounted or hidden based on the show state. |
| `unmount` | Boolean _(Default: `true`)_ | Whether the element should be `unmounted` or `hidden` based on the show state. |
| `enter` | String _(Default: '')_ | Classes to add to the transitioning element during the entire enter phase. |
| `enterFrom` | String _(Default: '')_ | Classes to add to the transitioning element before the enter phase starts. |
| `enterTo` | String _(Default: '')_ | Classes to add to the transitioning element immediately after the enter phase starts. |
@@ -331,9 +306,7 @@ function MyComponent({ isShowing }) {
##### Render prop arguments
| Prop | Type | Description |
| ----- | ---------------------- | ----------------------------------------------------------------------------------- |
| `ref` | React.MutableRefObject | A ref that needs to be manually added to the child node when using the render prop. |
- None
#### Transition.Child
@@ -359,7 +332,7 @@ function MyComponent({ isShowing }) {
| ----------- | ------------------------------------- | ------------------------------------------------------------------------------------- |
| `as` | String Component _(Default: `'div'`)_ | The element or component to render in place of the `Transition.Child` itself. |
| `appear` | Boolean _(Default: `false`)_ | Whether the transition should run on initial mount. |
| `unmount` | Boolean _(Default: `true`)_ | Whether the element should be unmounted or hidden based on the show state. |
| `unmount` | Boolean _(Default: `true`)_ | Whether the element should be `unmounted` or `hidden` based on the show state. |
| `enter` | String _(Default: '')_ | Classes to add to the transitioning element during the entire enter phase. |
| `enterFrom` | String _(Default: '')_ | Classes to add to the transitioning element before the enter phase starts. |
| `enterTo` | String _(Default: '')_ | Classes to add to the transitioning element immediately after the enter phase starts. |
@@ -369,9 +342,7 @@ function MyComponent({ isShowing }) {
##### Render prop arguments
| Prop | Type | Description |
| ----- | ---------------------- | ----------------------------------------------------------------------------------- |
| `ref` | React.MutableRefObject | A ref that needs to be manually added to the child node when using the render prop. |
- None
---