react-modal

react-modal is a popular, accessible, and highly customizable library for creating modal dialogs in React applications. It prioritizes accessibility, ensuring that modals created with it adhere to WAI-ARIA guidelines, making them usable and understandable by assistive technologies like screen readers.

Key Features:

* Accessibility First: Automatically handles focus management (trapping focus inside the modal), keyboard navigation (e.g., `Escape` key closes the modal), and injects necessary ARIA attributes for screen readers. It requires you to specify an `appElement` so screen readers know what content to ignore when the modal is open, focusing only on the modal's content.
* Customizable: Offers extensive props to control its appearance and behavior. You can apply custom CSS classes (`className`, `overlayClassName`) or inline styles (`style`, `overlayStyle`) to both the modal content and its overlay.
* Controlled Component: The modal's open/closed state is fully controlled by the `isOpen` prop, making it straightforward to integrate into your React component's state management.
* Lifecycle Callbacks: Provides props like `onAfterOpen`, `onRequestClose`, and `onAfterClose` to execute functions at different stages of the modal's lifecycle, allowing for side effects or state updates.
* Prevent Scrolling: By default, it prevents scrolling of the underlying `<body>` content when the modal is open, maintaining focus on the modal.
* Declarative API: Simple to use, you declare your modal and its content directly in your JSX.

Installation:

To add `react-modal` to your project, use npm or yarn:
```bash
npm install react-modal
# or
yarn add react-modal
```

Usage:

The core usage involves importing the `Modal` component, setting its `isOpen` prop to control visibility, and providing an `onRequestClose` function to handle closing actions (like clicking the overlay or pressing the Escape key). A crucial step is to call `Modal.setAppElement()` once in your application (typically in your main `index.js` or the component where your app mounts) to specify the root DOM element of your application. This binding is essential for accessibility, allowing `react-modal` to manage focus and hide the background content from screen readers when the modal is active.

Example Code

import React, { useState } from 'react';
import Modal from 'react-modal';

// IMPORTANT: Bind modal to your appElement (e.g., '#root' or another selector).
// This is crucial for accessibility to hide the main app content from screen readers 
// when the modal is open.
Modal.setAppElement('#root'); // Assuming your root element has an ID of 'root'

function MyModalComponent() {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  const customStyles = {
    content: {
      top: '50%',
      left: '50%',
      right: 'auto',
      bottom: 'auto',
      marginRight: '-50%',
      transform: 'translate(-50%, -50%)',
      padding: '25px',
      borderRadius: '8px',
      maxWidth: '500px',
      width: '90%',
      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.25)',
      border: 'none'
    },
    overlay: {
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      zIndex: 1000 // Ensure overlay is on top
    }
  };

  function openModal() {
    setModalIsOpen(true);
  }

  function afterOpenModal() {
    // references are now sync'd and can be accessed. 
    console.log('Modal opened!');
  }

  function closeModal() {
    setModalIsOpen(false);
  }

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>
      <h2 style={{ color: '#333' }}>React Modal Example</h2>
      <p>Click the button below to open a simple modal dialog.</p>
      <button 
        onClick={openModal} 
        style={{
          padding: '12px 25px',
          fontSize: '16px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer',
          outline: 'none'
        }}
      >
        Open Modal
      </button>

      <Modal
        isOpen={modalIsOpen}
        onAfterOpen={afterOpenModal}
        onRequestClose={closeModal} // This handles closing via overlay click or Esc key
        style={customStyles}
        contentLabel="Example Dialog"
      >
        <h3 style={{ marginTop: 0, color: '#333' }}>Welcome to Your Modal!</h3>
        <p style={{ lineHeight: '1.6', color: '#555' }}>
          This is the content of your modal. You can place any React components, forms, 
          or information here. The modal is accessible, focusing on its content 
          and allowing keyboard navigation.
        </p>
        <button 
          onClick={closeModal}
          style={{
            padding: '10px 20px',
            backgroundColor: '#dc3545',
            color: 'white',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
            marginTop: '15px',
            outline: 'none'
          }}
        >
          Close Modal
        </button>
      </Modal>
    </div>
  );
}

export default MyModalComponent;

Example Code

Related Topics