Accessible modal dialog component for React
Accessible modal dialog component for React.JS
To install, you can use npm or yarn:
$ npm install --save react-modal $ yarn add react-modal
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 (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(, appElement);
You can find more examples in the
examplesdirectory, which you can run in a local development server using
npm startor
yarn run start.
There are several demos hosted on CodePen which demonstrate various features of react-modal: