{"id":46634011,"url":"https://github.com/vadymshymko/react-clear-modal","last_synced_at":"2026-03-08T00:35:02.292Z","repository":{"id":62103935,"uuid":"557790458","full_name":"vadymshymko/react-clear-modal","owner":"vadymshymko","description":"Simple and lightweight, fully controlled isomorphic (with SSR support) modal component for React.js","archived":false,"fork":false,"pushed_at":"2026-03-02T07:55:07.000Z","size":1208,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-02T11:54:20.682Z","etag":null,"topics":["dialog","modal","modal-dialog","react","react-component","react-modal","react-modal-component","react-modal-dialog","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://github.com/vadymshymko/react-clear-modal","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vadymshymko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-10-26T10:02:08.000Z","updated_at":"2026-03-02T07:55:09.000Z","dependencies_parsed_at":"2025-12-02T23:04:07.433Z","dependency_job_id":null,"html_url":"https://github.com/vadymshymko/react-clear-modal","commit_stats":{"total_commits":78,"total_committers":2,"mean_commits":39.0,"dds":"0.47435897435897434","last_synced_commit":"e05fd175dc63405ac4157934a4ac965e6001c3cd"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"purl":"pkg:github/vadymshymko/react-clear-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Freact-clear-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Freact-clear-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Freact-clear-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Freact-clear-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vadymshymko","download_url":"https://codeload.github.com/vadymshymko/react-clear-modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadymshymko%2Freact-clear-modal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30238938,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T00:30:53.000Z","status":"ssl_error","status_checked_at":"2026-03-08T00:30:44.061Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dialog","modal","modal-dialog","react","react-component","react-modal","react-modal-component","react-modal-dialog","reactjs","typescript"],"created_at":"2026-03-08T00:35:01.653Z","updated_at":"2026-03-08T00:35:02.284Z","avatar_url":"https://github.com/vadymshymko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-clear-modal\n\n[![npm version](https://img.shields.io/npm/v/react-clear-modal)](https://www.npmjs.com/package/react-clear-modal)\n[![minified + gzip](https://img.shields.io/bundlephobia/minzip/react-clear-modal/latest)](https://bundlephobia.com/package/react-clear-modal@latest)\n[![typescript](https://badgen.net/npm/types/react-clear-modal)](https://unpkg.com/react-clear-modal/dist/index.d.ts)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/vadymshymko/react-clear-modal/blob/master/LICENSE)\n\nSimple and lightweight, fully controlled isomorphic (with SSR support) modal component for React.js\n\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n- [Demo](#demo)\n\n## Installation\n\n**npm**\n\n```bash\nnpm install react-clear-modal --save\n```\n\n**yarn**\n\n```bash\nyarn add react-clear-modal\n```\n\n**pnpm**\n\n```bash\npnpm add react-clear-modal\n```\n\n## Usage\n\n#### Basic Example:\n\n```js\nimport { useState } from 'react';\nimport ReactClearModal from 'react-clear-modal';\n\nfunction ReactClearModalExample() {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const openModal = useCallback(() =\u003e {\n    setIsModalOpen(true);\n  }, []);\n\n  const closeModal =  useCallback(() =\u003e {\n    setIsModalOpen(false);\n  }, []);\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton type=\"button\" title=\"Open\" onClick={openModal}\u003eOpen\u003c/button\u003e\n\n      \u003cReactClearModal\n        {/* here you can also pass any other element attributes. */}\n        isOpen={isModalOpen}\n        onRequestClose={closeModal}\n      \u003e\n        \u003cdiv\u003e\n          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.\n        \u003c/div\u003e\n\n        \u003cbutton type=\"button\" title=\"Close\" onClick={closeModal}\u003eClose\u003c/button\u003e\n      \u003c/ReactClearModal\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default ReactClearModalExample;\n```\n\n## Props\n\n| Name                        | Type                    | Default Value   | Description                                                                                                                                                                                                    |\n| --------------------------- | ----------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **isOpen**                  | `boolean`               | `false`         | Is the modal open                                                                                                                                                                                              |\n| **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) |\n| **closeTimeout**            | `number`                |                 | Time period in milliseconds after which the modal close function (`onRequestClose` prop) will be called                                                                                                        |\n| **preRender**               | `boolean`               | `false`         | Whether the modal window and its content must be present in the DOM when the `isOpen` property is set to `false`                                                                                               |\n| **contentProps**            | `object`                | `{}`            | DOM props (HTMLAttributes) for modal content wrapper div                                                                                                                                                       |\n| **parentElement**           | `string`\\|`HTMLElement` | `document.body` | Modal Portal container element (`HTMLElement`) or css selector (`string`). Ignored if `disableRenderInPortal` is set to `true`                                                                                 |\n| **disableCloseOnEsc**       | `boolean`               | `false`         | Prevent modal window from closing when `ESC` key is pressed                                                                                                                                                    |\n| **disableCloseOnBgClick**   | `boolean`               | `false`         | Prevent modal from closing after clicking on modal background                                                                                                                                                  |\n| **disableBodyScrollOnOpen** | `boolean`               | `false`         | Set `{overflow: hidden}` for `document.body` when modal is open                                                                                                                                                |\n| **disableRenderInPortal**   | `boolean`               | `false`         | Prevent render modal in portal (if `true` it will be rendered directly inside parent component)                                                                                                                |\n| ...                         | `object`                | `{}`            | DOM props (HTMLAttributes) for modal container div                                                                                                                                                             |\n\n## Demo\n\n[![Edit react-clear-modal](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-clear-modal-qdpb48)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadymshymko%2Freact-clear-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvadymshymko%2Freact-clear-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadymshymko%2Freact-clear-modal/lists"}