From 3d74c1b40b3e1afb0c4a9defa3a5fc1af807a71a Mon Sep 17 00:00:00 2001
From: Arijit Bhattacharya <hoodwink73@live.com>
Date: Fri, 29 Jun 2018 21:26:39 +0530
Subject: [PATCH] Update doc to inform v3 users about close transition

---
 docs/styles/transitions.md | 42 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/docs/styles/transitions.md b/docs/styles/transitions.md
index 889e33fe..6c2682d1 100644
--- a/docs/styles/transitions.md
+++ b/docs/styles/transitions.md
@@ -20,11 +20,49 @@ and fade out when it is closed:
 }
 ```
 
-In order for the close transition to take effect, you will also need to pass
-the `closeTimeoutMS={150}` prop to each of your modals.
 
 The above example will apply the fade transition globally, affecting all modals
 whose `afterOpen` and `beforeClose` classes have not been set via the
 `className` prop.  To apply the transition to one modal only, you can change
 the above class names and pass an object to your modal's `className` prop as
 described in the [previous section](classes.md).
+
+In order for the close transition to take effect, you will also need to pass
+the `closeTimeoutMS={150}` prop to each of your modals.
+
+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.
+
+Do not conditionally render the `<Modal />`.
+
+Instead of this
+
+```javascript
+{
+  this.state.showModal ?
+  <Modal
+    closeTimeoutMS={200}
+    isOpen
+    contentLabel="modal"
+    onRequestClose={() => this.toggleModal()}
+  >
+    <h2>Add modal content here</h2>
+  </Modal>
+  : null
+}
+```
+
+*Do this*
+
+```javascript
+{
+  <Modal
+    closeTimeoutMS={200}
+    isOpen={this.state.showModal}
+    contentLabel="modal"
+    onRequestClose={() => this.toggleModal()}
+  >
+    <h2>Add modal content here</h2>
+  </Modal>
+  : null
+}
+```