[added] ref for overlay and content

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:

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}
 />
 ```
 

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");
+  });
 };

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 */
 

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() {