Nostalgic Perogi Monogramming
    Have ideas to improve npm?Join in the discussion! »

    react-responsive-modal
    TypeScript icon, indicating that this package has built-in type declarations

    6.1.0 • Public • Published

    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

    Install

    npm i react-responsive-modal

    DownloadsWeekly Downloads

    40,316

    Version

    6.1.0

    License

    MIT

    Unpacked Size

    159 kB

    Total Files

    24

    Last publish

    Collaborators

    • avatar