@@ -144,31 +144,6 @@ function MyComponent() {
144
144
}
145
145
```
146
146
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
-
172
147
### Animating transitions
173
148
174
149
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 }) {
317
292
| ` show ` | Boolean | Whether the children should be shown or hidden. |
318
293
| ` as ` | String Component _ (Default: ` 'div' ` )_ | The element or component to render in place of the ` Transition ` itself. |
319
294
| ` 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. |
321
296
| ` enter ` | String _ (Default: '')_ | Classes to add to the transitioning element during the entire enter phase. |
322
297
| ` enterFrom ` | String _ (Default: '')_ | Classes to add to the transitioning element before the enter phase starts. |
323
298
| ` enterTo ` | String _ (Default: '')_ | Classes to add to the transitioning element immediately after the enter phase starts. |
@@ -331,9 +306,7 @@ function MyComponent({ isShowing }) {
331
306
332
307
##### Render prop arguments
333
308
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
337
310
338
311
#### Transition.Child
339
312
@@ -359,7 +332,7 @@ function MyComponent({ isShowing }) {
359
332
| ----------- | ------------------------------------- | ------------------------------------------------------------------------------------- |
360
333
| ` as ` | String Component _ (Default: ` 'div' ` )_ | The element or component to render in place of the ` Transition.Child ` itself. |
361
334
| ` 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. |
363
336
| ` enter ` | String _ (Default: '')_ | Classes to add to the transitioning element during the entire enter phase. |
364
337
| ` enterFrom ` | String _ (Default: '')_ | Classes to add to the transitioning element before the enter phase starts. |
365
338
| ` enterTo ` | String _ (Default: '')_ | Classes to add to the transitioning element immediately after the enter phase starts. |
@@ -369,9 +342,7 @@ function MyComponent({ isShowing }) {
369
342
370
343
##### Render prop arguments
371
344
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
375
346
376
347
---
377
348
0 commit comments