Accessible modal dialog component for React.JS
Build Status Coverage Status gzip size Join the chat at https://gitter.im/react-modal/Lobby
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):
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.14.3/react-modal.min.js" integrity="sha512-MY2jfK3DBnVzdS2V8MXo5lRtr0mNRroUI9hoLVv2/yL3vrJTam3VzASuKQ96fLEpyYIT4a8o7YgtUs5lPjiLVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -
Use
<ReactModal>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:
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);
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.
There are several demos hosted on CodePen which demonstrate various features of react-modal: