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
+ this.overlayRef = node}
+ contentRef={node => this.contentRef = node}
+ ...
+>
+ Modal Content.
+
+```
+
## 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(, 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() {