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):
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.14.3/react-modal.min.js" 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:
importReactfrom'react';importReactDOMfrom'react-dom';importModalfrom'react-modal';constcustomStyles={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');functionApp(){letsubtitle;const[modalIsOpen,setIsOpen]=React.useState(false);functionopenModal(){setIsOpen(true);}functionafterOpenModal(){// references are now sync'd and can be accessed.subtitle.style.color='#f00';}functioncloseModal(){setIsOpen(false);}return(<div><buttononClick={openModal}>Open Modal</button><ModalisOpen={modalIsOpen}onAfterOpen={afterOpenModal}onRequestClose={closeModal}style={customStyles}contentLabel="Example Modal"><h2ref={(_subtitle)=>(subtitle=_subtitle)}>Hello</h2><buttononClick={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: