Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-responsive-modal

5.0.2 • Public • Published

react-responsive-modal

npm version npm downloads per month codecov dependencies Status

A simple responsive and accessible react modal compatible with React 16 and ready for React 17.

  • Focus trap inside the modal.
  • Centered modals.
  • Scrolling modals.
  • Multiple modals.
  • Accessible modals.
  • Easily customizable via props.

Documentation

Installation

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

Or with yarn: yarn add react-responsive-modal

Usage

Edit react-responsive-modal

import React from 'react';
import ReactDOM from 'react-dom';
import 'react-responsive-modal/styles.css';
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} center>
          <h2>Simple centered modal</h2>
        </Modal>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Props

Check the documentation: https://react-responsive-modal.leopradel.com/#props.

License

MIT © Léo Pradel

Install

npm i react-responsive-modal

DownloadsWeekly Downloads

32,790

Version

5.0.2

License

MIT

Unpacked Size

131 kB

Total Files

26

Last publish

Collaborators

  • avatar