Skip to content

Commit 3d74c1b

Browse files
hoodwink73diasbruno
authored andcommitted
Update doc to inform v3 users about close transition
1 parent 1e349c0 commit 3d74c1b

File tree

1 file changed

+40
-2
lines changed

1 file changed

+40
-2
lines changed

docs/styles/transitions.md

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,49 @@ and fade out when it is closed:
2020
}
2121
```
2222

23-
In order for the close transition to take effect, you will also need to pass
24-
the `closeTimeoutMS={150}` prop to each of your modals.
2523

2624
The above example will apply the fade transition globally, affecting all modals
2725
whose `afterOpen` and `beforeClose` classes have not been set via the
2826
`className` prop. To apply the transition to one modal only, you can change
2927
the above class names and pass an object to your modal's `className` prop as
3028
described in the [previous section](classes.md).
29+
30+
In order for the close transition to take effect, you will also need to pass
31+
the `closeTimeoutMS={150}` prop to each of your modals.
32+
33+
Also, if you are using `v3` which supports **React 16**, the close transition works [only if you use](https://github.com/reactjs/react-modal/issues/530#issuecomment-335208533) the `isOpen` prop to toggle the visibility of the modal.
34+
35+
Do not conditionally render the `<Modal />`.
36+
37+
Instead of this
38+
39+
```javascript
40+
{
41+
this.state.showModal ?
42+
<Modal
43+
closeTimeoutMS={200}
44+
isOpen
45+
contentLabel="modal"
46+
onRequestClose={() => this.toggleModal()}
47+
>
48+
<h2>Add modal content here</h2>
49+
</Modal>
50+
: null
51+
}
52+
```
53+
54+
*Do this*
55+
56+
```javascript
57+
{
58+
<Modal
59+
closeTimeoutMS={200}
60+
isOpen={this.state.showModal}
61+
contentLabel="modal"
62+
onRequestClose={() => this.toggleModal()}
63+
>
64+
<h2>Add modal content here</h2>
65+
</Modal>
66+
: null
67+
}
68+
```

0 commit comments

Comments
 (0)