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
With npm: npm install react-responsive-modal --save
Or with yarn: yarn add react-responsive-modal
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'));Check the documentation: https://react-responsive-modal.leopradel.com/#props.
MIT © Léo Pradel