Skip to content

Commit ab820de

Browse files
authored
update React Transition docs (#203)
1 parent 5fb6052 commit ab820de

File tree

1 file changed

+4
-33
lines changed

1 file changed

+4
-33
lines changed

packages/@headlessui-react/README.md

Lines changed: 4 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -144,31 +144,6 @@ function MyComponent() {
144144
}
145145
```
146146

147-
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:
148-
149-
```tsx
150-
import { Transition } from '@headlessui/react'
151-
import { useState } from 'react'
152-
153-
function MyComponent() {
154-
const [isOpen, setIsOpen] = useState(false)
155-
156-
return (
157-
<>
158-
<button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
159-
<Transition
160-
show={isOpen}
161-
// ...
162-
>
163-
{ref => <div ref={ref}>{/* Your content goes here*/}</div>}
164-
</Transition>
165-
</>
166-
)
167-
}
168-
```
169-
170-
Be sure to attach the `ref` or your transitions will not work correctly.
171-
172147
### Animating transitions
173148

174149
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 }) {
317292
| `show` | Boolean | Whether the children should be shown or hidden. |
318293
| `as` | String Component _(Default: `'div'`)_ | The element or component to render in place of the `Transition` itself. |
319294
| `appear` | Boolean _(Default: `false`)_ | Whether the transition should run on initial mount. |
320-
| `unmount` | Boolean _(Default: `true`)_ | Whether the element should be unmounted or hidden based on the show state. |
295+
| `unmount` | Boolean _(Default: `true`)_ | Whether the element should be `unmounted` or `hidden` based on the show state. |
321296
| `enter` | String _(Default: '')_ | Classes to add to the transitioning element during the entire enter phase. |
322297
| `enterFrom` | String _(Default: '')_ | Classes to add to the transitioning element before the enter phase starts. |
323298
| `enterTo` | String _(Default: '')_ | Classes to add to the transitioning element immediately after the enter phase starts. |
@@ -331,9 +306,7 @@ function MyComponent({ isShowing }) {
331306

332307
##### Render prop arguments
333308

334-
| Prop | Type | Description |
335-
| ----- | ---------------------- | ----------------------------------------------------------------------------------- |
336-
| `ref` | React.MutableRefObject | A ref that needs to be manually added to the child node when using the render prop. |
309+
- None
337310

338311
#### Transition.Child
339312

@@ -359,7 +332,7 @@ function MyComponent({ isShowing }) {
359332
| ----------- | ------------------------------------- | ------------------------------------------------------------------------------------- |
360333
| `as` | String Component _(Default: `'div'`)_ | The element or component to render in place of the `Transition.Child` itself. |
361334
| `appear` | Boolean _(Default: `false`)_ | Whether the transition should run on initial mount. |
362-
| `unmount` | Boolean _(Default: `true`)_ | Whether the element should be unmounted or hidden based on the show state. |
335+
| `unmount` | Boolean _(Default: `true`)_ | Whether the element should be `unmounted` or `hidden` based on the show state. |
363336
| `enter` | String _(Default: '')_ | Classes to add to the transitioning element during the entire enter phase. |
364337
| `enterFrom` | String _(Default: '')_ | Classes to add to the transitioning element before the enter phase starts. |
365338
| `enterTo` | String _(Default: '')_ | Classes to add to the transitioning element immediately after the enter phase starts. |
@@ -369,9 +342,7 @@ function MyComponent({ isShowing }) {
369342

370343
##### Render prop arguments
371344

372-
| Prop | Type | Description |
373-
| ----- | ---------------------- | ----------------------------------------------------------------------------------- |
374-
| `ref` | React.MutableRefObject | A ref that needs to be manually added to the child node when using the render prop. |
345+
- None
375346

376347
---
377348

0 commit comments

Comments
 (0)