Accessible modal dialog component for React
JavaScript Makefile Python Shell
Clone or download
Leimi and diasbruno [fixed] remove aria-modal attr to prevent browser bugs
There were a couple problems with the aria-modal attribute:

- it was not set on the correct dom element (in theory, it should be
set on the element having the dialog role, as stated in #654)
- it is buggy in Safari. The easy way to fix the problem is to remove the attribute
(again, as suggested in #654). While it's cool on paper, the attribute is currently
not necessary, since the `aria-hidden="true"` is set correctly on the
app element.
Latest commit 1e349c0 Jul 26, 2018
Failed to load latest commit information.
.github [chore] update the pull request template... Apr 12, 2018
dist Release v3.5.1. Jul 4, 2018
docs [added] additional data attributes. Jul 4, 2018
examples [added] add class to html when modal is open Feb 21, 2018
scripts [chore] changelog writer. Nov 23, 2017
specs [added] additional data attributes. Jul 4, 2018
src [fixed] remove aria-modal attr to prevent browser bugs Jul 30, 2018
.babelrc [chore] Use babel-preset-env instead of babel-preset-es2015 Oct 11, 2017
.eslintrc.js Add eslint rule to disallow importing devDependencies in lib sources Apr 13, 2018
.gitignore [chore] added patterns on .gitignore. Jun 19, 2017
.npmignore [chore] update list of files that shouldn't be packed. Mar 13, 2018
.travis.yml [chore] run tests only on node 8. Oct 18, 2017 Release v3.5.1. Jul 4, 2018 Add extra information for contributors (#143) Apr 9, 2016
LICENSE Updates License (#303) Jun 15, 2017
Makefile chore: update Makefile. Jun 1, 2018 [Chore] update added description for setting app element Mar 13, 2018 firstish Sep 18, 2014
book.json Move documentation site to GitBook Dec 27, 2016 [chore] prevent publish if an error occur. Jun 8, 2017
bower.json Release v3.5.1. Jul 4, 2018
karma.conf.js [chore] update dependencies, lint rules and refactor tests. Sep 22, 2017
package.json Release v3.5.1. Jul 4, 2018
webpack.config.js [chore] added example with react-router. Sep 23, 2017
webpack.dist.config.js [chore] added babel-cli to compile and fix dist configuration. Oct 4, 2017
webpack.test.config.js [chore] update dependencies, lint rules and refactor tests. Sep 22, 2017


Accessible modal dialog component for React.JS

Build Status Coverage Status gzip size Join the chat at

Table of Contents


To install, you can use npm or yarn:

$ npm install react-modal
$ yarn add react-modal

API documentation

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:

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'

// Make sure to bind modal to your appElement (

class App extends React.Component {
  constructor() {

    this.state = {
      modalIsOpen: false

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);

  openModal() {
    this.setState({modalIsOpen: true});

  afterOpenModal() {
    // references are now sync'd and can be accessed. = '#f00';

  closeModal() {
    this.setState({modalIsOpen: false});

  render() {
    return (
        <button onClick={this.openModal}>Open Modal</button>
          contentLabel="Example Modal"

          <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
          <button onClick={this.closeModal}>close</button>
          <div>I am a modal</div>
            <input />
            <button>tab navigation</button>
            <button>the modal</button>

ReactDOM.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: