[added] Added an id prop, applied to the modal dialog (content) (#765)

* Added an ID prop, applied to the modal dialog.
reactjs · Jul 14, 2019 · c747c24 · c747c24
1 parent d7ec04d
commit c747c24
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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}
       >
         <div
+          id={id}
           ref={this.setContentRef}
           style={{ ...contentStyles, ...this.props.style.content }}
           className={this.buildClassName("content", className)}