Skip to content

pradel/react-responsive-modal

Repository files navigation

react-responsive-modal

npm version npm downloads per month codecov

A simple responsive and accessible react modal.

  • Focus trap inside the modal.
  • Centered modals.
  • Scrolling modals.
  • Multiple modals.
  • Accessible modals.
  • Easily customizable via props.
  • Typescript support
  • Small bundle size

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, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'react-responsive-modal/styles.css';
import { Modal } from 'react-responsive-modal';

const App = () => {
  const [open, setOpen] = useState(false);

  const onOpenModal = () => setOpen(true);
  const onCloseModal = () => setOpen(false);

  return (
    <div>
      <button onClick={onOpenModal}>Open modal</button>
      <Modal open={open} onClose={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