react-clear-modal
Version:
Simple and lightweight, fully controlled isomorphic (with SSR support) modal component for React.js
91 lines (67 loc) • 5.8 kB
Markdown
# react-clear-modal
[](https://www.npmjs.com/package/react-clear-modal)
[](https://bundlephobia.com/package/react-clear-modal@latest)
[](https://unpkg.com/react-clear-modal/dist/index.d.ts)
[](https://github.com/vadymshymko/react-clear-modal/blob/master/LICENSE)
Simple and lightweight, fully controlled isomorphic (with SSR support) modal component for React.js
## Table of contents
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Demo](#demo)
## Installation
**npm**
```bash
npm install react-clear-modal --save
```
**yarn**
```bash
yarn add react-clear-modal
```
## Usage
#### Basic Example:
```js
import { useState } from 'react';
import ReactClearModal from 'react-clear-modal';
function ReactClearModalExample() {
const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = useCallback(() => {
setIsModalOpen(true);
}, []);
const closeModal = useCallback(() => {
setIsModalOpen(false);
}, []);
return (
<div>
<button type="button" title="Open" onClick={openModal}>Open</button>
<ReactClearModal
{/* here you can also pass any other element attributes. */}
isOpen={isModalOpen}
onRequestClose={closeModal}
>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae quia, neque modi libero quidem ipsum architecto, incidunt molestias culpa, totam accusantium reprehenderit animi voluptas magni alias error commodi ut.
</div>
<button type="button" title="Close" onClick={closeModal}>Close</button>
</ReactClearModal>
</div>
);
}
export default ReactClearModalExample;
```
## Props
| Name | Type | Default Value | Description |
| --------------------------- | ----------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **isOpen** | `boolean` | `false` | Is the modal open |
| **onRequestClose** | `function` | | The function that will be called to close the modal window when the ESC button is pressed (if `disableCloseOnEsc` !== true) or an area outside of the content is clicked (if `disableCloseOnBgClick` !== true) |
| **closeTimeout** | `number` | | Time period in milliseconds after which the modal close function (`onRequestClose` prop) will be called |
| **preRender** | `boolean` | `false` | Whether the modal window and its content must be present in the DOM when the `isOpen` property is set to `false` |
| **contentProps** | `object` | `{}` | DOM props (HTMLAttributes) for modal content wrapper div |
| **parentElement** | `string`\|`HTMLElement` | `document.body` | Modal Portal container element (`HTMLElement`) or css selector (`string`). Ignored if `disableRenderInPortal` is set to `true` |
| **disableCloseOnEsc** | `boolean` | `false` | Prevent modal window from closing when `ESC` key is pressed |
| **disableCloseOnBgClick** | `boolean` | `false` | Prevent modal from closing after clicking on modal background |
| **disableBodyScrollOnOpen** | `boolean` | `false` | Set `{overflow: hidden}` for `document.body` when modal is open |
| **disableRenderInPortal** | `boolean` | `false` | Prevent render modal in portal (if `true` it will be rendered directly inside parent component) |
| ... | `object` | `{}` | DOM props (HTMLAttributes) for modal container div |
## Demo
[](https://codesandbox.io/s/react-clear-modal-qdpb48)