react-modal
Accessible modal dialog component for React.JS
Table of Contents
Installation
To install, you can use npm or yarn:
$ npm install --save 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:
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 (
<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 which demonstrate various features of react-modal:
![[change] Class names being added to body during render of non-opened modals](https://avatars.githubusercontent.com/u/2483304?v=4)
![[added] shouldCloseOnEsc prop](https://avatars.githubusercontent.com/u/4335450?v=4)
![[added] Support using multiple document.body classes](https://avatars.githubusercontent.com/u/3409645?v=4)
2 Mar 29, 2022
83.6k Dec 30, 2022
38 Dec 30, 2022
2 Jun 7, 2022
2 Sep 9, 2022
2 Feb 10, 2022
28.9k Jan 7, 2023
30.5k Jan 4, 2023
2 Mar 7, 2022
1 Dec 22, 2021
9 Jun 30, 2022
10.3k Jan 2, 2023
11 Dec 31, 2022
18.2k Jan 8, 2023
75.8k Jan 4, 2023
25.6k Jan 3, 2023
12.6k Jan 3, 2023
10.6k Jan 5, 2023
9.7k Jan 4, 2023