react-modal

Accessible modal dialog component for React.JS

Usage

<Modal
  isOpen={bool}
  onRequestClose={fn}
  closeTimeoutMS={n}
  style={customStyle}>

  <h1>Modal Content</h1>
  <p>Etc.</p>
</Modal>

Styles

Styles are passed as an object with 2 keys, 'overlay' and 'content' like so

{
  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.

Examples

Inside an app:

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});
  },

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

  render: function() {
    return (
      <div>
        <button onClick={this.openModal}>Open Modal</button>
        <Modal
          isOpen={this.state.modalIsOpen}
          onRequestClose={this.closeModal}
          style={customStyles} >

          <h2>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);

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 'shouldCloseOnClickOutside' prop with 'false' value.

<Modal
  isOpen={bool}
  onRequestClose={fn}
  closeTimeoutMS={n}
  shouldCloseOnClickOutside={false}
  style={customStyle}>

  <h1>Force Modal</h1>
  <p>Modal cannot be closed when clickig the overlay area</p>
  <button onClick={handleCloseFunc}>Close Modal...</button>
</Modal>

Demos

• http://reactjs.github.io/react-modal/
• http://reactjs.github.io/react-modal/bootstrap