reactjs/react-modal

★ 7,411JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((react-modal))
    What it does
      Shows pop-up dialogs
      Traps keyboard focus
      Works with screen readers
    Setup
      npm or yarn install
      One component import
    Customization
      Inline styles
      CSS class names
      Open and close callbacks
    Accessibility
      ARIA compliant
      Tab focus contained

mindmap root((react-modal)) What it does Shows pop-up dialogs Traps keyboard focus Works with screen readers Setup npm or yarn install One component import Customization Inline styles CSS class names Open and close callbacks Accessibility ARIA compliant Tab focus contained

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a confirmation dialog to a React app that traps keyboard focus and works with screen readers out of the box.

USE CASE 2

Build an accessible image lightbox or form modal that opens on button click and closes when the user presses Escape.

USE CASE 3

Create a modal with a form where the Tab key cycles only through the form fields, not the page behind it.

Tech stack

JavaScriptReact

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

react-modal is a component for React applications that displays a pop-up dialog box on top of the rest of the page. When a user clicks a button or triggers some action, the modal appears in the center of the screen while the content behind it is still visible but inactive. Closing the modal returns the user to the normal page. The main focus of this library is accessibility, meaning it is built to work properly with screen readers and keyboard navigation. A screen reader is software that reads on-screen content aloud for people with visual impairments. react-modal ensures that when a dialog opens, keyboard focus moves into it and stays there until the dialog closes, which is a requirement for accessible web applications. Installing it takes one command via npm or yarn, the standard tools for adding code packages to a JavaScript project. Once added, you import the Modal component into your React code, pass it a true/false value to control whether it is open, and supply optional callbacks for when it opens, closes, or receives a close request from the user. Styling can be applied inline through a style prop or through CSS class names, giving developers control over the visual appearance without any constraints from the library itself. The README includes a working code example showing how to open and close the modal with a button, how to run custom logic right after the modal opens, and how form elements inside the modal keep keyboard tab focus contained within the dialog. Additional live demos on CodePen show specific features like overlay click handling, inline styles, and CSS class styling.

Copy-paste prompts

Prompt 1

Show me how to add react-modal to my React app with a button that opens the modal and an X button that closes it, including the required appElement setup.

Prompt 2

I'm using react-modal and need to run code as soon as the modal finishes opening. Which prop do I use and how do I wire it up?

Prompt 3

How do I style a react-modal with CSS classes instead of inline styles so I can control the overlay and content box separately?

Open on GitHub → Explain another repo

← reactjs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.