Simple responsive modal for react

react-responsive-modal

A simple responsive react modal compatible with React 15 and 16.

• Centered modals.
• Scrolling modals.
• Multiple modals.
• Easily customizable via props.

Installation

With npm: npm install react-responsive-modal --save

Or with yarn: yarn add react-responsive-modal

Usage

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

export default class App extends React.Component {
  state = {
    open: false,
  };

  onOpenModal = () => {
    this.setState({ open: true });
  };

  onCloseModal = () => {
    this.setState({ open: false });
  };

  render() {
    const { open } = this.state;
    return (
      <div>
        <button onClick={this.onOpenModal}>Open modal</button>
        <Modal open={open} onClose={this.onCloseModal} little>
          <h2>Simple centered modal</h2>
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

Usage with css

By default react-responsive-modal is using
react-jss.

If you don't want to add it to your project you can use the css version of this
project:

// Import the css file
import 'react-responsive-modal/lib/react-responsive-modal.css';
import Modal from 'react-responsive-modal/lib/css';

Props

GitHub