November's Paddleball Marathon

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

    3.14.3 • Public • Published

    react-modal

    NOTE

    Need feedback to push a new version of react-modal forward. See issue #881.

    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() {
      let 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,090,012

    Version

    3.14.3

    License

    MIT

    Unpacked Size

    181 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar