# react-modal

> Accessible modal dialog component for React.JS

Latest version **3.16.3** (published 2024-12-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-modal
pnpm add react-modal
yarn add react-modal
bun add react-modal
```

## Health

**Score 48/100 (D)** — status: stable.

Positive: has types package; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 3.16.3 |
| Published | 2024-12-17 |
| First published | 2014-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-modal) |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 183.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7404 |
| Maintainers | diasbruno |
| Keywords | react, react-component, modal, dialog |

## Links

- npm: https://www.npmjs.com/package/react-modal
- Repository: https://github.com/reactjs/react-modal
- Issues: https://github.com/reactjs/react-modal/issues
- npm.io page: https://npm.io/package/react-modal

## Dependencies (4)

- [exenv](https://npm.io/package/exenv.md) ^1.2.0
- [warning](https://npm.io/package/warning.md) ^4.0.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-lifecycles-compat](https://npm.io/package/react-lifecycles-compat.md) ^3.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.16.3 (latest) — 2024-12-17
- 3.0.0-rc2 (next) — 2017-10-04
- 3.16.2 — 2024-12-17
- 3.16.1 — 2022-10-18
- 3.15.1 — 2022-04-27
- 3.14.4 — 2021-11-10
- 3.14.3 — 2021-06-15
- 3.14.2 — 2021-06-02
- 3.14.1 — 2021-06-02
- 3.13.1 — 2021-04-13
- 3.12.1 — 2020-11-23
- 3.11.2 — 2020-02-26
- 3.11.1 — 2019-10-26
- 3.10.1 — 2019-08-21
- 3.9.1 — 2019-07-14
- … 101 more at https://npm.io/package/react-modal/versions

## README

# react-modal

Accessible modal dialog component for React.JS

[![Build Status](https://img.shields.io/github/actions/workflow/status/reactjs/react-modal/test.yml?branch=master)](https://github.com/reactjs/react-modal/actions/workflows/test.yml)
[![Coverage Status](https://coveralls.io/repos/github/reactjs/react-modal/badge.svg?branch=master)](https://coveralls.io/github/reactjs/react-modal?branch=master)
![gzip size](http://img.badgesize.io/https://unpkg.com/react-modal/dist/react-modal.min.js?compression=gzip)
[![Join the chat at https://gitter.im/react-modal/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-modal/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

## Table of Contents

* [Installation](#installation)
* [API documentation](#api-documentation)
* [Examples](#examples)
* [Demos](#demos)

## Installation

To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):


    $ npm install --save react-modal
    $ yarn add react-modal
    
To install react-modal in React CDN app:

   - Add this CDN script tag after React CDN scripts and before your JS files (for example from [cdnjs](https://cdnjs.com/)): 

            <script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.14.3/react-modal.min.js"
            integrity="sha512-MY2jfK3DBnVzdS2V8MXo5lRtr0mNRroUI9hoLVv2/yL3vrJTam3VzASuKQ96fLEpyYIT4a8o7YgtUs5lPjiLVQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"></script>

   - Use `<ReactModal>` tag inside your React CDN app.


## API documentation

The primary documentation for react-modal is the
[reference book](https://reactjs.github.io/react-modal), 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:

```jsx
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](https://codepen.io) which
demonstrate various features of react-modal:

* [Minimal example](https://codepen.io/claydiffrient/pen/KNxgav)
* [Using setAppElement](https://codepen.io/claydiffrient/pen/ENegGJ)
* [Using onRequestClose](https://codepen.io/claydiffrient/pen/KNjVBx)
* [Using shouldCloseOnOverlayClick](https://codepen.io/claydiffrient/pen/woLzwo)
* [Using inline styles](https://codepen.io/claydiffrient/pen/ZBmyKz)
* [Using CSS classes for styling](https://codepen.io/claydiffrient/pen/KNjVrG)
* [Customizing the default styles](https://codepen.io/claydiffrient/pen/pNXgqQ)

---
_Source: https://npm.io/package/react-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._