1 | # react-responsive-modal
|
2 |
|
3 | [![npm version](https://img.shields.io/npm/v/react-responsive-modal.svg)](https://www.npmjs.com/package/react-responsive-modal)
|
4 | [![npm downloads per month](https://img.shields.io/npm/dm/react-responsive-modal.svg)](https://www.npmjs.com/package/react-responsive-modal)
|
5 | [![codecov](https://img.shields.io/codecov/c/github/pradel/react-responsive-modal/master.svg)](https://codecov.io/gh/pradel/react-responsive-modal)
|
6 |
|
7 | A simple responsive and accessible react modal.
|
8 |
|
9 | - Focus trap inside the modal.
|
10 | - Centered modals.
|
11 | - Scrolling modals.
|
12 | - Multiple modals.
|
13 | - Accessible modals.
|
14 | - Easily customizable via props.
|
15 | - Typescript support
|
16 | - [Small bundle size](https://bundlephobia.com/result?p=react-responsive-modal)
|
17 |
|
18 | ## Documentation
|
19 |
|
20 | - [Getting started](https://react-responsive-modal.leopradel.com/)
|
21 | - [Installation](https://react-responsive-modal.leopradel.com/#installation)
|
22 | - [Usage](https://react-responsive-modal.leopradel.com/#usage)
|
23 | - [Props](https://react-responsive-modal.leopradel.com/#props)
|
24 | - [Licence](https://react-responsive-modal.leopradel.com/#license)
|
25 |
|
26 | ## Installation
|
27 |
|
28 | With npm: `npm install react-responsive-modal --save`
|
29 |
|
30 | Or with yarn: `yarn add react-responsive-modal`
|
31 |
|
32 | ## Usage
|
33 |
|
34 | [![Edit react-responsive-modal](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9jxp669j2o)
|
35 |
|
36 | ```javascript
|
37 | import React, { useState } from 'react';
|
38 | import ReactDOM from 'react-dom';
|
39 | import 'react-responsive-modal/styles.css';
|
40 | import { Modal } from 'react-responsive-modal';
|
41 |
|
42 | const App = () => {
|
43 | const [open, setOpen] = useState(false);
|
44 |
|
45 | const onOpenModal = () => setOpen(true);
|
46 | const onCloseModal = () => setOpen(false);
|
47 |
|
48 | return (
|
49 | <div>
|
50 | <button onClick={onOpenModal}>Open modal</button>
|
51 | <Modal open={open} onClose={onCloseModal} center>
|
52 | <h2>Simple centered modal</h2>
|
53 | </Modal>
|
54 | </div>
|
55 | );
|
56 | };
|
57 |
|
58 | ReactDOM.render(<App />, document.getElementById('app'));
|
59 | ```
|
60 |
|
61 | ## Props
|
62 |
|
63 | Check the documentation: https://react-responsive-modal.leopradel.com/#props.
|
64 |
|
65 | ## License
|
66 |
|
67 | MIT © [Léo Pradel](https://www.leopradel.com/)
|