react-modal

Accessible modal dialog component for React.JS

!gzip size

Table of Contents

* Installation
* API documentation
* Examples
* Demos

Changes from upstream

* Apply preventScroll PR

Installation

To install, you can use npm or yarn:

$ npm install react-modal
$ yarn add react-modal

API documentation

The primary documentation for react-modal is the
reference book, 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 (http://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement')

function App(){
var 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 (


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 which
demonstrate various features of react-modal:

* Minimal example
* Using setAppElement
* Using onRequestClose
* Using shouldCloseOnOverlayClick
* Using inline styles
* Using CSS classes for styling
* Customizing the default styles