react-responsive-modal

esm Styles
A simple responsive and accessible react modal
Version 7.0.0 License MIT
Keywords
reactresponsivemodalmobileflex
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 7.0.0
- 6.4.2
- 6.4.1
- 6.3.2
- 6.2.0
- 6.1.0
- 6.0.1
- 6.0.0
- 5.2.6
- 5.2.5
- 5.2.1
- 5.2.0
- 5.1.1
- 5.1.0
- 5.0.3
- 5.0.2
- 5.0.1
- 5.0.0
- 4.0.1
- 4.0.0
- 3.6.0
- 3.5.1
- 3.5.0
- 3.4.0
- 3.3.0
- 3.2.0
- 3.1.0
- 3.0.3
- 3.0.2
- 3.0.1
- 3.0.0
- 2.1.0
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.9.4
- 1.9.3
- 1.9.2
- 1.9.0
- 1.8.0
- 1.7.1
- 1.6.1
- 1.6.0
- 1.5.0
- 1.4.2
- 1.4.1
- 1.3.0
- 1.2.3
- 1.2.2
- 1.2.1
- 1.1.7
- 1.1.6
- 1.1.5
- 1.1.4
- 1.1.3
- 1.1.2
- 1.1.1
- 1.1.0
- 1.0.0
<script src=" https://cdn.jsdelivr.net/npm/react-responsive-modal@6.4.2/dist/index.min.js "></script>
<link href=" https://cdn.jsdelivr.net/npm/react-responsive-modal@6.4.2/styles.min.css " rel="stylesheet">
No default CSS file set by the package author so the URL is guessed. You can always browse all package files to use another one.
react-responsive-modal
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