React modal : Accessible modal dialog component for React.JS

React modal : Accessible modal dialog component for React.JS

Accessible modal dialog component for React.


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:

Github Repository