Ninjas Practicing Multidimensionality
    Have ideas to improve npm?Join in the discussion! »

    react-modal
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-modal package

    3.13.1 • Public • Published

    react-modal

    Accessible modal dialog component for React.JS

    Build Status Coverage Status gzip size Join the chat at https://gitter.im/react-modal/Lobby

    Table of Contents

    Installation

    To install, you can use npm or yarn:

    $ npm install --save react-modal
    $ yarn add react-modal
    

    API documentation

    The primary documentation for react-modal is the reference book, which describes the API and gives examples of its usage.

    Examples

    Here is a simple example of react-modal being used in an app with some custom styles and focusable input elements within the modal content:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Modal from 'react-modal';
    
    const customStyles = {
      content : {
        top                   : '50%',
        left                  : '50%',
        right                 : 'auto',
        bottom                : 'auto',
        marginRight           : '-50%',
        transform             : 'translate(-50%, -50%)'
      }
    };
    
    // Make sure to bind modal to your appElement (https://reactcommunity.org/react-modal/accessibility/)
    Modal.setAppElement('#yourAppElement')
    
    function App(){
      var subtitle;
      const [modalIsOpen,setIsOpen] = React.useState(false);
      function openModal() {
        setIsOpen(true);
      }
    
      function afterOpenModal() {
        // references are now sync'd and can be accessed.
        subtitle.style.color = '#f00';
      }
    
      function closeModal(){
        setIsOpen(false);
      }
    
        return (
          <div>
            <button onClick={openModal}>Open Modal</button>
            <Modal
              isOpen={modalIsOpen}
              onAfterOpen={afterOpenModal}
              onRequestClose={closeModal}
              style={customStyles}
              contentLabel="Example Modal"
            >
    
              <h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
              <button onClick={closeModal}>close</button>
              <div>I am a modal</div>
              <form>
                <input />
                <button>tab navigation</button>
                <button>stays</button>
                <button>inside</button>
                <button>the modal</button>
              </form>
            </Modal>
          </div>
        );
    }
    
    ReactDOM.render(<App />, appElement);

    You can find more examples in the examples directory, which you can run in a local development server using npm start or yarn run start.

    Demos

    There are several demos hosted on CodePen which demonstrate various features of react-modal:

    Install

    npm i react-modal

    DownloadsWeekly Downloads

    1,179,220

    Version

    3.13.1

    License

    MIT

    Unpacked Size

    174 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar