diff --git a/docs/README.md b/docs/README.md index 96ae2b68..bd74a76a 100644 --- a/docs/README.md +++ b/docs/README.md @@ -63,6 +63,10 @@ import ReactModal from 'react-modal'; See the `Styles` section for more details. */ overlayClassName="ReactModal__Overlay" + /* + String id to be applied to the content div + */ + id="" /* String className to be applied to the modal content. See the `Styles` section for more details. diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js index 87e2613c..2600e608 100644 --- a/specs/Modal.spec.js +++ b/specs/Modal.spec.js @@ -233,6 +233,13 @@ export default () => { }); }); + it("supports id prop", () => { + const modal = renderModal({ isOpen: true, id: "id" }); + mcontent(modal) + .id.includes("id") + .should.be.ok(); + }); + it("supports portalClassName", () => { const modal = renderModal({ isOpen: true, diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js index 371da3bf..5384ad6c 100644 --- a/src/components/ModalPortal.js +++ b/src/components/ModalPortal.js @@ -57,6 +57,7 @@ export default class ModalPortal extends Component { shouldCloseOnEsc: PropTypes.bool, overlayRef: PropTypes.func, contentRef: PropTypes.func, + id: PropTypes.string, testId: PropTypes.string }; @@ -328,7 +329,7 @@ export default class ModalPortal extends Component { }, {}); render() { - const { className, overlayClassName, defaultStyles } = this.props; + const { id, className, overlayClassName, defaultStyles } = this.props; const contentStyles = className ? {} : defaultStyles.content; const overlayStyles = overlayClassName ? {} : defaultStyles.overlay; @@ -341,6 +342,7 @@ export default class ModalPortal extends Component { onMouseDown={this.handleOverlayOnMouseDown} >