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 React Modal Dialog Component. This isn't ready to be used yet, still under development.

Accessibility Notes

Etc. etc. etc.

Usage

<Modal
  isOpen={bool}
  onRequestClose={fn}
  closeTimeoutMS={n}
>
  <h1>Modal Content</h1>
  <p>Etc.</p>
</Modal>

Inside an app:

/** @jsx React.DOM */

var React = require('react');
var Modal = require('react-modal');

var appElement = document.getElementById('your-app-element');

Modal.setAppElement(appElement);
Modal.injectCSS();

var App = React.createClass({

  getInitialState: function() {
    return { modalIsOpen: false };
  },

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

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

  render: function() {
    return (
      <div>
        <button onClick={this.openModal}>Open Modal</button>
        <Modal
          isOpen={this.state.modalIsOpen}
          onRequestClose={this.closeModal}
        >
          <h2>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>
    );
  }
});

React.renderComponent(<App/>, appElement);