Accessible modal dialog component for React
Clone or download
Latest commit 1b561fc Sep 26, 2018
Permalink
Failed to load latest commit information.
.github [chore] update the pull request template... Apr 12, 2018
dist Release v3.6.1. Sep 25, 2018
docs [fixed] set default role for accessibility Aug 29, 2018
examples [added] add class to html when modal is open Feb 21, 2018
scripts [chore] changelog writer. Nov 23, 2017
specs [fixed] set default role for accessibility Aug 29, 2018
src [fixed] if tabbable element is undefined, focus head or tail based on… Sep 27, 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
CHANGELOG.md Release v3.6.1. Sep 25, 2018
CONTRIBUTING.md Add extra information for contributors (#143) Apr 9, 2016
LICENSE Updates License (#303) Jun 15, 2017
Makefile chore: update Makefile. Jun 1, 2018
README.md [Chore] update README.md: added description for setting app element Mar 13, 2018
UPGRADE_GUIDE.md firstish Sep 18, 2014
book.json Move documentation site to GitBook Dec 27, 2016
bootstrap.sh [chore] prevent publish if an error occur. Jun 8, 2017
bower.json Release v3.6.1. Sep 25, 2018
karma.conf.js [chore] update dependencies, lint rules and refactor tests. Sep 22, 2017
package-lock.json Release v3.6.1. Sep 25, 2018
package.json Release v3.6.1. Sep 25, 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

README.md

react-modal

Accessible modal dialog component for React.JS

Build Status Coverage Status gzip size Join the chat at https://gitter.im/react-modal/Lobby

Table of Contents

Installation

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.

Examples

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 (http://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement')

class App extends React.Component {
  constructor() {
    super();

    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.
    this.subtitle.style.color = '#f00';
  }

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

  render() {
    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>
    );
  }
}

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.

Demos

There are several demos hosted on CodePen which demonstrate various features of react-modal: