react-modal

What is react-modal?

The react-modal npm package is a library that provides accessible modal dialog components for React applications. It allows developers to create and manage modals in an accessible way, following the WAI-ARIA guidelines for modality. The package offers features such as locking the background scroll when a modal is open, setting the app element, and customizing styles and behaviors of the modal.

What are react-modal's main functionalities?

Basic Modal Usage

This code demonstrates how to create a basic modal using react-modal. It includes a button to open the modal and a button inside the modal to close it.

{"import React, { useState } from 'react';\nimport Modal from 'react-modal';\n\nconst App = () => {\n  const [modalIsOpen, setModalIsOpen] = useState(false);\n\n  function openModal() {\n    setModalIsOpen(true);\n  }\n\n  function closeModal() {\n    setModalIsOpen(false);\n  }\n\n  return (\n    <div>\n      <button onClick={openModal}>Open Modal</button>\n      <Modal\n        isOpen={modalIsOpen}\n        onRequestClose={closeModal}\n        contentLabel='Example Modal'\n      >\n        <h2>Hello</h2>\n        <button onClick={closeModal}>close</button>\n        <div>I am a modal</div>\n      </Modal>\n    </div>\n  );\n};\n\nexport default App;"}

Custom Styles

This code snippet shows how to apply custom styles to a modal using the 'style' prop.

{"import React from 'react';\nimport Modal from 'react-modal';\n\nconst customStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    transform: 'translate(-50%, -50%)'\n  }\n};\n\nconst App = () => {\n  return (\n    <Modal\n      isOpen={true}\n      style={customStyles}\n      contentLabel='Example Modal'\n    >\n      <h2>Hello</h2>\n      <button>close</button>\n      <div>I am a modal with custom styles</div>\n    </Modal>\n  );\n};\n\nexport default App;"}

Accessibility Features

This example demonstrates how to enhance the accessibility of a modal by setting the app element and using ARIA attributes.

{"import React from 'react';\nimport Modal from 'react-modal';\n\nModal.setAppElement('#yourAppElement');\n\nconst App = () => {\n  return (\n    <Modal\n      isOpen={true}\n      aria={{\n        labelledby: 'heading',\n        describedby: 'full_description'\n      }}\n      contentLabel='Accessible Example Modal'\n    >\n      <h2 id='heading'>Hello</h2>\n      <div id='full_description'>I am an accessible modal</div>\n      <button>close</button>\n    </Modal>\n  );\n};\n\nexport default App;"}

Other packages similar to react-modal

react-bootstrap

React Bootstrap provides a Bootstrap-based modal component. It is similar to react-modal but also includes a wide range of other Bootstrap components for use in React.

material-ui

Material-UI offers a Dialog component that is similar to react-modal. It follows Material Design guidelines and integrates well with other Material-UI components.

reactstrap

reactstrap is another Bootstrap-based library that includes a Modal component. It is similar to react-modal but is specifically designed for use with Bootstrap 4.

README

react-modal

Accessible modal dialog component for React.JS

Table of Contents

• Installation
• API documentation
• Examples
• Demos

Installation

To install, you can use npm or yarn:

$ npm install 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 (http://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement')

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      modalIsOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal() {
    this.setState({modalIsOpen: true});
  }

  afterOpenModal() {
    // references are now sync'd and can be accessed.
    this.subtitle.style.color = '#f00';
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }

  render() {
    return (
      <div>
        <button onClick={this.openModal}>Open Modal</button>
        <Modal
          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >

          <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
          <button onClick={this.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:

• Minimal example
• Using setAppElement
• Using onRequestClose
• Using shouldCloseOnOverlayClick
• Using inline styles
• Using CSS classes for styling
• Customizing the default styles