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

Property Type Default Description
open* Boolean Control if the modal is open or not.
onClose* Function Fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.
children Node The content of the modal.
closeOnEsc Boolean true Is the modal closable when user press esc key.
closeOnOverlayClick Boolean true Is the modal closable when user click on overlay.
little Boolean false Is the dialog centered (when you don't have a lot of content).
showCloseIcon Boolean true Show the close icon.
closeIconSize Number 28 Close icon size.
closeIconSvgPath Node A valid svg path to show as icon.
classNames Object {} An object containing classNames to style the modal, can have properties 'overlay' (classname for overlay div), 'modal' (classname for modal content div), 'closeIcon' (classname for close icon svg). You can customize the transition with 'transitionEnter', 'transitionEnterActive', 'transitionExit', 'transitionExitActive'
styles Object {} An object containing the styles objects to style the modal, can have properties 'overlay', 'modal', 'closeIcon'.
animationDuration Number 500 Animation duration in milliseconds.

GitHub