https://github.com/postmanlabs/react-modal
Accessible modal dialog component for React
https://github.com/postmanlabs/react-modal
Last synced: 3 months ago
JSON representation
Accessible modal dialog component for React
- Host: GitHub
- URL: https://github.com/postmanlabs/react-modal
- Owner: postmanlabs
- License: mit
- Fork: true (reactjs/react-modal)
- Created: 2016-07-11T16:47:23.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-11-29T04:39:48.000Z (about 3 years ago)
- Last Synced: 2024-09-29T18:21:38.022Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://reactjs.github.io/react-modal
- Size: 2.01 MB
- Stars: 3
- Watchers: 3
- Forks: 5
- Open Issues: 46
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-modal
Accessible modal dialog component for React.JS
## Usage
```xml
Modal Content
Etc.
```
## Styles
Styles are passed as an object with 2 keys, 'overlay' and 'content' like so
```js
{
overlay : {
position : 'fixed',
top : 0,
left : 0,
right : 0,
bottom : 0,
backgroundColor : 'rgba(255, 255, 255, 0.75)'
},
content : {
position : 'absolute',
top : '40px',
left : '40px',
right : '40px',
bottom : '40px',
border : '1px solid #ccc',
background : '#fff',
overflow : 'auto',
WebkitOverflowScrolling : 'touch',
borderRadius : '4px',
outline : 'none',
padding : '20px'
}
}
```
Styles passed to the modal are merged in with the above defaults and applied to their respective elements.
At this time, media queries will need to be handled by the consumer.
### Using CSS Classes
If you prefer not to use inline styles or are unable to do so in your project,
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.
### Overriding styles globally
The default styles above are available on `Modal.defaultStyles`. Changes to this
object will apply to all instances of the modal.
## Examples
Inside an app:
```js
var React = require('react');
var ReactDOM = require('react-dom');
var Modal = require('react-modal');
var appElement = document.getElementById('your-app-element');
/*
By default the modal is anchored to document.body. All of the following overrides are available.
* element
Modal.setAppElement(appElement);
* query selector - uses the first element found if you pass in a class.
Modal.setAppElement('#your-app-element');
*/
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};
var App = React.createClass({
getInitialState: function() {
return { modalIsOpen: false };
},
openModal: function() {
this.setState({modalIsOpen: true});
},
afterOpenModal: function() {
// references are now sync'd and can be accessed.
this.refs.subtitle.style.color = '#f00';
},
closeModal: function() {
this.setState({modalIsOpen: false});
},
render: function() {
return (
Open Modal
Hello
close
I am a modal
tab navigation
stays
inside
the modal
);
}
});
ReactDOM.render(, appElement);
```
# Testing
When using React Test Utils with this library, here are some things to keep in mind:
- You need to set isOpen={true} on the modal component for it to render its children.
- You need to use the `.portal` property, as in `ReactDOM.findDOMNode(renderedModal.portal)` or `TestUtils.scryRenderedDOMComponentsWithClass(Modal.portal, 'my-modal-class')` to acquire a handle to the inner contents of your modal.
By default the modal is closed when clicking outside of it (the overlay area). If you want to prevent this behavior you can
pass the 'shouldCloseOnOverlayClick' prop with 'false' value.
```xml
Force Modal
Modal cannot be closed when clicking the overlay area
Close Modal...
```
# Demos
* http://reactjs.github.io/react-modal/
* http://reactjs.github.io/react-modal/bootstrap