Skip to content

Commit 921358e

Browse files
hoodwink73diasbruno
authored andcommitted
Add explicit comments as suggested in PR review
1 parent 3d74c1b commit 921358e

File tree

1 file changed

+17
-6
lines changed

1 file changed

+17
-6
lines changed

Diff for: docs/styles/transitions.md

+17-6
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,27 @@ whose `afterOpen` and `beforeClose` classes have not been set via the
2727
the above class names and pass an object to your modal's `className` prop as
2828
described in the [previous section](classes.md).
2929

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.
30+
In order for the fade transition to work, you need to inform the `<Modal />` about the transition time required for the animation.
3231

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.
32+
Like this
33+
34+
```javascript
35+
<Modal closeTimeoutMS={2000} />
36+
```
37+
38+
`closeTimeoutMS` is expressed in milliseconds.
39+
40+
The `closeTimeoutMS` value and the value used in CSS or `style` prop passed to `<Modal />` needs to be the same.
41+
42+
Warning: if you are using **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.
3443

3544
Do not conditionally render the `<Modal />`.
3645

3746
Instead of this
3847

3948
```javascript
4049
{
41-
this.state.showModal ?
50+
this.state.showModal &&
4251
<Modal
4352
closeTimeoutMS={200}
4453
isOpen
@@ -47,7 +56,6 @@ Instead of this
4756
>
4857
<h2>Add modal content here</h2>
4958
</Modal>
50-
: null
5159
}
5260
```
5361

@@ -63,6 +71,9 @@ Instead of this
6371
>
6472
<h2>Add modal content here</h2>
6573
</Modal>
66-
: null
6774
}
6875
```
76+
77+
React Modal has adopted the [stable Portal API](https://reactjs.org/docs/portals.html) API as exposed in React 16.
78+
79+
And `createProtal` API from React 16 [no longer allow](https://github.com/facebook/react/issues/10826#issuecomment-355719729) developers to intervene the unmounting of the portal component.

0 commit comments

Comments
 (0)