Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-modal

Package Overview
Dependencies
Maintainers
3
Versions
114
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-modal - npm Package Compare versions

Comparing version 1.5.2 to 1.6.0

7

CHANGELOG.md

@@ -0,1 +1,8 @@

v1.6.0 - Tue, 06 Dec 2016 15:09:25 GMT
--------------------------------------
- [de14816](../../commit/de14816) [added] Ability for modal to be appended to arbitrary elements (#183)
- [3d8e5a0](../../commit/3d8e5a0) [added] Add contentLabel prop to put aria-label on modal content
v1.5.2 - Sat, 08 Oct 2016 14:29:09 GMT

@@ -2,0 +9,0 @@ --------------------------------------

30

lib/components/Modal.js

@@ -13,2 +13,6 @@ var React = require('react');

function getParentElement(parentSelector) {
return parentSelector();
}
var Modal = React.createClass({

@@ -41,3 +45,5 @@

shouldCloseOnOverlayClick: React.PropTypes.bool,
role: React.PropTypes.string
parentSelector: React.PropTypes.func,
role: React.PropTypes.string,
contentLabel: React.PropTypes.string.isRequired
},

@@ -51,3 +57,4 @@

closeTimeoutMS: 0,
shouldCloseOnOverlayClick: true
shouldCloseOnOverlayClick: true,
parentSelector: () => document.body
};

@@ -59,3 +66,5 @@ },

this.node.className = this.props.portalClassName;
document.body.appendChild(this.node);
var parent = getParentElement(this.props.parentSelector);
parent.appendChild(this.node);
this.renderPortal(this.props);

@@ -65,2 +74,10 @@ },

componentWillReceiveProps: function(newProps) {
var currentParent = getParentElement(this.props.parentSelector);
var newParent = getParentElement(newProps.parentSelector);
if(newParent !== currentParent) {
currentParent.removeChild(this.node);
newParent.appendChild(this.node);
}
this.renderPortal(newProps);

@@ -70,4 +87,9 @@ },

componentWillUnmount: function() {
if (this.props.ariaHideApp) {
ariaAppHider.show(this.props.appElement);
}
ReactDOM.unmountComponentAtNode(this.node);
document.body.removeChild(this.node);
var parent = getParentElement(this.props.parentSelector);
parent.removeChild(this.node);
elementClass(document.body).remove('ReactModal__Body--open');

@@ -74,0 +96,0 @@ },

3

lib/components/ModalPortal.js

@@ -205,3 +205,4 @@ var React = require('react');

onMouseUp: this.handleContentMouseUp,
role: this.props.role
role: this.props.role,
"aria-label": this.props.contentLabel
},

@@ -208,0 +209,0 @@ this.props.children

{
"name": "react-modal",
"version": "1.5.2",
"version": "1.6.0",
"description": "Accessible modal dialog component for React.JS",

@@ -5,0 +5,0 @@ "main": "./lib/index",

@@ -22,2 +22,3 @@ # react-modal

style={customStyle}
contentLabel="Modal"
>

@@ -76,2 +77,33 @@ <h1>Modal Content</h1>

### Appended to custom node
You can choose an element for the modal to be appended to, rather than using
body tag. To do this, provide a function to `parentSelector` prop that return
the element to be used.
```jsx
function getParent() {
return document.querySelector('#root');
}
<Modal
...
parentSelector={getParent}
...
>
<p>Modal Content.</p>
</Modal>
```
### Body class
When the modal is opened a `ReactModal__Body--open` class is added to the `body` tag.
You can use this to remove scrolling on the the body while the modal is open.
```CSS
/* Remove scroll on the body when react-modal is open */
.ReactModal__Body--open {
overflow: hidden;
}
```
## Examples

@@ -141,3 +173,5 @@ Inside an app:

onRequestClose={this.closeModal}
style={customStyles} >
style={customStyles}
contentLabel="Example Modal"
>

@@ -177,3 +211,5 @@ <h2 ref="subtitle">Hello</h2>

shouldCloseOnOverlayClick={false}
style={customStyle}>
style={customStyle}
contentLabel="No Overlay Click Modal"
>

@@ -180,0 +216,0 @@ <h1>Force Modal</h1>

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc