Accessible modal dialog component for React.JS
npm install react-modalAccessible modal dialog component for React.JS


!gzip size

* Installation
* API documentation
* Examples
* Demos
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:
``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 (
ReactDOM.render(
`
You can find more examples in the examples directory, which you can run in anpm start
local development server using or yarn run start`.
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