https://github.com/vadymshymko/react-clear-modal
Simple and lightweight, fully controlled isomorphic (with SSR support) modal component for React.js
https://github.com/vadymshymko/react-clear-modal
dialog modal modal-dialog react react-component react-modal react-modal-component react-modal-dialog reactjs typescript
Last synced: 3 months ago
JSON representation
Simple and lightweight, fully controlled isomorphic (with SSR support) modal component for React.js
- Host: GitHub
- URL: https://github.com/vadymshymko/react-clear-modal
- Owner: vadymshymko
- License: mit
- Created: 2022-10-26T10:02:08.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2026-03-02T07:55:07.000Z (3 months ago)
- Last Synced: 2026-03-02T11:54:20.682Z (3 months ago)
- Topics: dialog, modal, modal-dialog, react, react-component, react-modal, react-modal-component, react-modal-dialog, reactjs, typescript
- Language: TypeScript
- Homepage: https://github.com/vadymshymko/react-clear-modal
- Size: 1.15 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# 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
```
**pnpm**
```bash
pnpm 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 (
Open
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.
Close
);
}
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)