react-modal

Accessible modal dialog component for React

NOTE

Need feedback to push a new version of react-modal forward. See issue #881.

Accessible modal dialog component for React.JS

To install, you can use npm or yarn:

$ 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):

integrity="sha512-MY2jfK3DBnVzdS2V8MXo5lRtr0mNRroUI9hoLVv2/yL3vrJTam3VzASuKQ96fLEpyYIT4a8o7YgtUs5lPjiLVQ=="

crossorigin="anonymous"

referrerpolicy="no-referrer">

- Use `` tag inside your React CDN app.

The primary documentation for react-modal is the

reference book, which describes the API

and gives examples of its usage.

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:

``` js
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);
```