From e5b0181b477986d4c9044ac31168c435d2558935 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <pelletier.emmanuel@gmail.com>
Date: Wed, 10 Aug 2016 07:40:55 +0200
Subject: [PATCH] [added] ability to change default 'ReactModalPortal' class
 (#208)

A new portalClassName prop in the <Modal> component lets us change
the wrapper className.
---
 README.md               | 2 ++
 lib/components/Modal.js | 4 +++-
 specs/Modal.spec.js     | 6 ++++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bf5e2136..fbfc5749 100644
--- a/README.md
+++ b/README.md
@@ -57,6 +57,8 @@ you can pass `className` and `overlayClassName` props to the Modal.  If you do
 this then none of the default styles will apply and you will have full control
 over styling via CSS.
 
+You can also pass a `portalClassName` to change the wrapper's class (*ReactModalPortal*).
+This doesn't affect styling as no styles are applied to this element by default.
 
 ### Overriding styles globally
 The default styles above are available on `Modal.defaultStyles`. Changes to this
diff --git a/lib/components/Modal.js b/lib/components/Modal.js
index f4b79950..cbabf565 100644
--- a/lib/components/Modal.js
+++ b/lib/components/Modal.js
@@ -30,6 +30,7 @@ var Modal = React.createClass({
       content: React.PropTypes.object,
       overlay: React.PropTypes.object
     }),
+    portalClassName: React.PropTypes.string,
     appElement: React.PropTypes.instanceOf(SafeHTMLElement),
     onAfterOpen: React.PropTypes.func,
     onRequestClose: React.PropTypes.func,
@@ -41,6 +42,7 @@ var Modal = React.createClass({
   getDefaultProps: function () {
     return {
       isOpen: false,
+      portalClassName: 'ReactModalPortal',
       ariaHideApp: true,
       closeTimeoutMS: 0,
       shouldCloseOnOverlayClick: true
@@ -49,7 +51,7 @@ var Modal = React.createClass({
 
   componentDidMount: function() {
     this.node = document.createElement('div');
-    this.node.className = 'ReactModalPortal';
+    this.node.className = this.props.portalClassName;
     document.body.appendChild(this.node);
     this.renderPortal(this.props);
   },
diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
index bafbbbcb..1c748a01 100644
--- a/specs/Modal.spec.js
+++ b/specs/Modal.spec.js
@@ -107,6 +107,12 @@ describe('Modal', function () {
     equal(tabPrevented, true);
   });
 
+  it('supports portalClassName', function () {
+    var modal = renderModal({isOpen: true, portalClassName: 'myPortalClass'});
+    equal(modal.node.className, 'myPortalClass');
+    unmountModal();
+  });
+
   it('supports custom className', function() {
     var modal = renderModal({isOpen: true, className: 'myClass'});
     notEqual(modal.portal.refs.content.className.indexOf('myClass'), -1);