A simple responsive and accessible react modal.
- Focus trap inside the modal.
- Centered modals.
- Scrolling modals.
- Multiple modals.
- Accessible modals.
- Easily customizable via props.
- Typescript support
- Small bundle size
Documentation
Installation
With npm: npm install react-responsive-modal --save
Or with yarn: yarn add react-responsive-modal
Usage
import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import 'react-responsive-modal/styles.css'; import { Modal } from 'react-responsive-modal'; const App = () => { const [open, setOpen] = useState(false); const onOpenModal = () => setOpen(true); const onCloseModal = () => setOpen(false); return ( <div> <button onClick={onOpenModal}>Open modal</button> <Modal open={open} onClose={onCloseModal} center> <h2>Simple centered modal</h2> </Modal> </div> ); }; ReactDOM.render(<App />, document.getElementById('app'));
Props
Check the documentation: https://react-responsive-modal.leopradel.com/#props.
License
MIT © Léo Pradel