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