Name: react-modal
Owner: Storybook
Description: Accessible modal dialog component for React
Created: 2018-04-08 23:05:25.0
Updated: 2018-04-08 23:05:28.0
Pushed: 2018-04-14 00:10:43.0
Homepage: https://reactjs.github.io/react-modal
Size: 2213
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Accessible modal dialog component for React.JS
To install, you can use npm or yarn:
$ npm install react-modal
$ yarn add react-modal
The primary documentation for react-modal is the reference book, which describes the API and gives examples of its usage.
Here is a simple example of react-modal being used in an app with some custom styles and focusable input elements within the modal content:
rt React from 'react';
rt ReactDOM from 'react-dom';
rt Modal from 'react-modal';
t customStyles = {
ntent : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
ake sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
l.setAppElement('#yourAppElement')
s App extends React.Component {
nstructor() {
super();
this.state = {
modalIsOpen: false
};
this.openModal = this.openModal.bind(this);
this.afterOpenModal = this.afterOpenModal.bind(this);
this.closeModal = this.closeModal.bind(this);
enModal() {
this.setState({modalIsOpen: true});
terOpenModal() {
// references are now sync'd and can be accessed.
this.subtitle.style.color = '#f00';
oseModal() {
this.setState({modalIsOpen: false});
nder() {
return (
<div>
<button onClick={this.openModal}>Open Modal</button>
<Modal
isOpen={this.state.modalIsOpen}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
<button onClick={this.closeModal}>close</button>
<div>I am a modal</div>
<form>
<input />
<button>tab navigation</button>
<button>stays</button>
<button>inside</button>
<button>the modal</button>
</form>
</Modal>
</div>
);
tDOM.render(<App />, appElement);
You can find more examples in the examples directory, which you can run in a
local development server using npm start or yarn run start.
There are several demos hosted on CodePen which demonstrate various features of react-modal: