From 0809958bf92b8f68a26f743744fe7ec6e64c4718 Mon Sep 17 00:00:00 2001
From: Pomaskin Ilya <ilya.pomaskin+github@gmail.com>
Date: Tue, 13 Feb 2018 17:00:15 +0300
Subject: [PATCH] [added] ref for overlay and content

---
 README.md                     | 15 +++++++++++++++
 docs/README.md                |  8 ++++++++
 specs/Modal.spec.js           | 16 ++++++++++++++++
 src/components/Modal.js       |  4 +++-
 src/components/ModalPortal.js |  6 +++++-
 5 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index dd3d7ddd..21ab5667 100644
--- a/README.md
+++ b/README.md
@@ -202,6 +202,21 @@ You can use this to remove scrolling on the body while the modal is open.
 }
 ```
 
+### Refs
+
+You can use ref callbacks to get overlay and content DOM nodes:
+
+```jsx
+<Modal
+  ...
+  overlayRef={node => this.overlayRef = node}
+  contentRef={node => this.contentRef = node}
+  ...
+>
+  <p>Modal Content.</p>
+</Modal>
+```
+
 ## Examples
 
 Inside an app:
diff --git a/docs/README.md b/docs/README.md
index 36f58725..e474eb2f 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -104,6 +104,14 @@ import ReactModal from 'react-modal';
     labelledby: "heading",
     describedby: "full_description"
   }}
+  /* 
+    Overlay ref callback.
+  */
+  overlayRef={setOverlayRef}
+  /* 
+    Content ref callback.
+  */
+  contentRef={setContentRef}
 />
 ```
 
diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
index 7765d967..d86624fd 100644
--- a/specs/Modal.spec.js
+++ b/specs/Modal.spec.js
@@ -601,4 +601,20 @@ export default () => {
     Modal.setAppElement(node);
     ReactDOM.render(<App />, node);
   });
+
+  it("use overlayRef and contentRef", () => {
+    let overlay = null;
+    let content = null;
+
+    renderModal({
+      isOpen: true,
+      overlayRef: node => (overlay = node),
+      contentRef: node => (content = node)
+    });
+
+    overlay.should.be.instanceOf(HTMLElement);
+    content.should.be.instanceOf(HTMLElement);
+    overlay.classList.contains("ReactModal__Overlay");
+    content.classList.contains("ReactModal__Content");
+  });
 };
diff --git a/src/components/Modal.js b/src/components/Modal.js
index f3e037c3..7db54386 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -59,7 +59,9 @@ export default class Modal extends Component {
     aria: PropTypes.object,
     role: PropTypes.string,
     contentLabel: PropTypes.string,
-    shouldCloseOnEsc: PropTypes.bool
+    shouldCloseOnEsc: PropTypes.bool,
+    overlayRef: PropTypes.func,
+    contentRef: PropTypes.func
   };
   /* eslint-enable react/no-unused-prop-types */
 
diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
index ea46d945..5ded7a16 100644
--- a/src/components/ModalPortal.js
+++ b/src/components/ModalPortal.js
@@ -50,7 +50,9 @@ export default class ModalPortal extends Component {
     contentLabel: PropTypes.string,
     aria: PropTypes.object,
     children: PropTypes.node,
-    shouldCloseOnEsc: PropTypes.bool
+    shouldCloseOnEsc: PropTypes.bool,
+    overlayRef: PropTypes.func,
+    contentRef: PropTypes.func
   };
 
   constructor(props) {
@@ -110,10 +112,12 @@ export default class ModalPortal extends Component {
 
   setOverlayRef = overlay => {
     this.overlay = overlay;
+    this.props.overlayRef && this.props.overlayRef(overlay);
   };
 
   setContentRef = content => {
     this.content = content;
+    this.props.contentRef && this.props.contentRef(content);
   };
 
   beforeOpen() {