# react-modal # NOTE Need feedback to push a new version of `react-modal` forward. See issue [#881](https://github.com/reactjs/react-modal/issues/881). Accessible modal dialog component for React.JS [![Build Status](https://api.travis-ci.org/reactjs/react-modal.svg)](https://travis-ci.org/reactjs/react-modal) [![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/)): - Use `` 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 (

(subtitle = _subtitle)}>Hello

I am a modal

); } ReactDOM.render(, 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)

	Stars	Issues	Version	Updated	Created
date-fns	33,810	685	3.6.0	2 months ago	10 years ago
react	222,917	874	18.3.1	21 days ago	13 years ago
react-modal	7,324	198	3.16.1	2 years ago	10 years ago
redux	60,505	41	5.0.1	5 months ago	13 years ago
redux-thunk	17,742	2	3.1.0	5 months ago	9 years ago

date-fns vs react vs react-modal vs redux vs redux-thunk

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past