Skip to content

Commit

Permalink
[added] ability to change default 'ReactModalPortal' class (reactjs#208)
Browse files Browse the repository at this point in the history
A new portalClassName prop in the <Modal> component lets us change
the wrapper className.
  • Loading branch information
manuhabitela authored and claydiffrient committed Aug 10, 2016
1 parent 1e29e4f commit e5b0181
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 1 deletion.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion lib/components/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -41,6 +42,7 @@ var Modal = React.createClass({
getDefaultProps: function () {
return {
isOpen: false,
portalClassName: 'ReactModalPortal',
ariaHideApp: true,
closeTimeoutMS: 0,
shouldCloseOnOverlayClick: true
Expand All @@ -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);
},
Expand Down
6 changes: 6 additions & 0 deletions specs/Modal.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit e5b0181

Please sign in to comment.