{"id":13421871,"url":"https://github.com/hiradary/reoverlay","last_synced_at":"2025-07-29T10:08:51.529Z","repository":{"id":38433809,"uuid":"277072674","full_name":"hiradary/reoverlay","owner":"hiradary","description":"The missing solution for managing modals in React.","archived":false,"fork":false,"pushed_at":"2023-03-05T04:00:56.000Z","size":46997,"stargazers_count":156,"open_issues_count":16,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-07T17:46:05.064Z","etag":null,"topics":["modal","overlay","react","react-modal","react-overlay","reoverlay"],"latest_commit_sha":null,"homepage":"https://hiradary.github.io/reoverlay","language":"JavaScript","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/hiradary.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-07-04T08:44:33.000Z","updated_at":"2025-05-24T21:57:39.000Z","dependencies_parsed_at":"2024-04-17T10:53:19.719Z","dependency_job_id":"a8c27f07-d8b1-4b8f-8d75-50f55307a3b0","html_url":"https://github.com/hiradary/reoverlay","commit_stats":{"total_commits":40,"total_committers":1,"mean_commits":40.0,"dds":0.0,"last_synced_commit":"2ef13d0d8309e9e40facb9bbaab8409e92def3a5"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/hiradary/reoverlay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiradary%2Freoverlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiradary%2Freoverlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiradary%2Freoverlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiradary%2Freoverlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hiradary","download_url":"https://codeload.github.com/hiradary/reoverlay/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiradary%2Freoverlay/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267668687,"owners_count":24124966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["modal","overlay","react","react-modal","react-overlay","reoverlay"],"created_at":"2024-07-30T23:00:33.221Z","updated_at":"2025-07-29T10:08:51.494Z","avatar_url":"https://github.com/hiradary.png","language":"JavaScript","funding_links":["https://buymeacoffee.com/hiradary"],"categories":["UI Components"],"sub_categories":["Overlay","Dialog/Modal/Alert"],"readme":"# Reoverlay\n\n![Size](https://img.shields.io/bundlephobia/minzip/reoverlay)\n![Downloads](https://img.shields.io/npm/dw/reoverlay)\n![Version](https://img.shields.io/npm/v/reoverlay)\n![NPM License](https://img.shields.io/npm/l/reoverlay)\n![Twitter](https://img.shields.io/twitter/follow/hiradary?style=social)\n\u003cp\u003eThe missing solution for managing modals in React.\u003c/p\u003e\n\n![Reoverlay](http://s12.picofile.com/file/8402126226/reoverlay_github_cover.jpg)\n\n## Installation 🔥\n```bash\nnpm install reoverlay --save\n\n# or if you prefer Yarn:\nyarn add reoverlay\n```\n\n## Demo ⭐️\n\nYou can see a couple of examples on the [website](https://hiradary.github.io/reoverlay).\n\n## Philosophy 🔖\nThere are many ways you can manage your modals in React. You can ([See a relevant article](https://codeburst.io/modals-in-react-f6c3ff9f4701)):\n- Use a modal component as a wrapper (like a button component) and include it wherever you trigger the hide/show of that modal.\n- The ‘portal’ approach that takes a modal and attaches it to document.body.\n- A top level modal component that shows different contents based on some property in the store.\n\u003cp\u003eEach one of these has its own cons \u0026 pros. Take a look at the following example:\u003c/p\u003e\n\n```javascript\nconst HomePage = () =\u003e {\n  const [isDeleteModalOpen, setDeleteModal] = useState(false)\n  const [isConfirmModalOpen, setConfirmModal] = useState(false)\n  \n  return (\n    \u003cdiv\u003e\n      \u003cModal isOpen={isDeleteModalOpen}\u003e\n        ...\n      \u003c/Modal\u003e\n      \u003cModal isOpen={isConfirmModalOpen}\u003e\n        ...\n      \u003c/Modal\u003e\n      ...\n      \u003cbutton onClick={() =\u003e setDeleteModal(true)}\u003eShow delete modal\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e setConfirmModal(true)}\u003eShow confirm modal\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\nThis is the most commonly adopted approach. However, I believe it has a few drawbacks:\n- You might find it difficult to show modals on top of each other. (aka \"Stacked Modals\")\n- More boilerplate code. If you were to have 3 modals in a page, you had to use Modal component three times, declare more and more variables to handle visibility, etc.\n- Unlike reoverlay, you can't manage your modals outside React scope (e.g Store). Though it's not generally a good practice to manage modals/overlays outside React scope, It comes in handy in some cases. (e.g Using axios interceptors to show modals according to network status, access control, etc.)\n\n\u003cstrong\u003eReoverlay\u003c/strong\u003e, on the other hand, offers a rather more readable and easier approach. You'll be given a top-level modal component (`ModalContainer`), and a few APIs to handle triggering hide/show. Check [usage](#usage-) to see how it works.\n\n## Usage 🎯\n\nThere are two ways you can use Reoverlay.\n\n### #1 - Pass on your modals directly\n\n`App.js`:\n```javascript\nimport React from 'react';\nimport { ModalContainer } from 'reoverlay';\n\nconst App = () =\u003e {\n  return (\n    \u003c\u003e\n      ...\n      \u003cRoutes /\u003e\n      ...\n      \u003cModalContainer /\u003e\n    \u003c/\u003e\n  )\n}\n```\nLater where you want to show your modal:\n```javascript\nimport React from 'react';\nimport { Reoverlay } from 'reoverlay';\n\nimport { ConfirmModal } from '../modals';\n\nconst PostPage = () =\u003e {\n  \n  const deletePost = () =\u003e {\n    Reoverlay.showModal(ConfirmModal, {\n      text: \"Are you sure you want to delete this post\",\n      onConfirm: () =\u003e {\n        axios.delete(...)\n      }\n    })\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eThis is your post page\u003c/p\u003e\n      \u003cbutton onClick={deletePost}\u003eDelete this post\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\nYour modal file (`ConfirmModal` in this case):\n```javascript\nimport React from 'react';\nimport { ModalWrapper, Reoverlay } from 'reoverlay';\n\nimport 'reoverlay/lib/ModalWrapper.css';\n\nconst ConfirmModal = ({ confirmText, onConfirm }) =\u003e {\n\n  const closeModal = () =\u003e {\n    Reoverlay.hideModal();\n  }\n\n  return (\n    \u003cModalWrapper\u003e\n      {confirmText}\n      \u003cbutton onClick={onConfirm}\u003eYes\u003c/button\u003e\n      \u003cbutton onClick={closeModal}\u003eNo\u003c/button\u003e\n    \u003c/ModalWrapper\u003e\n  )\n}\n```\nThis is the simplest usage. If you don't want your modals to be passed directly to `Reoverlay.showModal(myModal)`, you could go on with the second approach.\n\n### #2 - Pass on your modal's name\n\n`App.js`:\n```javascript\nimport React from 'react';\nimport { Reoverlay, ModalContainer } from 'reoverlay';\n\nimport { AuthModal, DeleteModal, ConfirmModal } from '../modals';\n\n// Here you pass your modals to Reoverlay\nReoverlay.config([\n  {\n    name: \"AuthModal\",\n    component: AuthModal\n  },\n  {\n    name: \"DeleteModal\",\n    component: DeleteModal\n  },\n  {\n    name: \"ConfirmModal\",\n    component: ConfirmModal\n  }\n])\n\nconst App = () =\u003e {\n  return (\n    \u003c\u003e\n      ...\n      \u003cRoutes /\u003e\n      ...\n      \u003cModalContainer /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\nLater where you want to show your modal:\n```javascript\nimport React from 'react';\nimport { Reoverlay } from 'reoverlay';\n\nconst PostPage = () =\u003e {\n  \n  const deletePost = () =\u003e {\n    Reoverlay.showModal(\"ConfirmModal\", {\n      confirmText: \"Are you sure you want to delete this post\",\n      onConfirm: () =\u003e {\n        axios.delete(...)\n      }\n    })\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eThis is your post page\u003c/p\u003e\n      \u003cbutton onClick={deletePost}\u003eDelete this post\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\nYour modal file: (`ConfirmModal` in this case):\n```javascript\nimport React from 'react';\nimport { ModalWrapper, Reoverlay } from 'reoverlay';\n\nimport 'reoverlay/lib/ModalWrapper.css';\n\nconst ConfirmModal = ({ confirmText, onConfirm }) =\u003e {\n\n  const closeModal = () =\u003e {\n    Reoverlay.hideModal();\n  }\n\n  return (\n    \u003cModalWrapper\u003e\n      {confirmText}\n      \u003cbutton onClick={onConfirm}\u003eYes\u003c/button\u003e\n      \u003cbutton onClick={closeModal}\u003eNo\u003c/button\u003e\n    \u003c/ModalWrapper\u003e\n  )\n}\n```\n\u003cstrong\u003eNOTE:\u003c/strong\u003e Using `ModalWrapper` is optional. It's just a half-transparent full-screen div, with a few preset animation options. You can create and use your own ModalWrapper. In that case, you can fully customize animation, responsiveness, etc. Check the code for [ModalWrapper](https://github.com/hiradary/reoverlay/blob/master/src/ModalWrapper.js).\n\n## Props ⚒\n\n### Reoverlay methods\n\n##### `config(configData)`\n\n| Name       | Type                                           | Default | Descripiton                         |\n|------------|------------------------------------------------|---------|-------------------------------------|\n| configData | `Array\u003c{ name: string, component: React.FC }\u003e` | `[]`    | An array of modals along with their name. |\n\nThis method must be called in the entry part of your application (e.g `App.js`), or basically before you attempt to show any modal. It takes an array of objects, containing data about your modals.\n\n```javascript\nimport { AuthModal, DeleteModal, PostModal } from '../modals';\n\nReoverlay.config([\n  {\n    name: 'AuthModal',\n    component: AuthModal\n  },\n  {\n    name: 'DeleteModal',\n    component: DeleteModal\n  },\n  {\n    name: 'PostModal',\n    component: PostModal\n  }\n])\n```\n\u003cstrong\u003eNOTE:\u003c/strong\u003e If you're code-splitting your app and you don't want to import all modals in the entry part, you don't need to use this. Please refer to [usage](#usage-) for more info.\n\n##### `showModal(modal, props)`\n\n| Name    | Type                  | Default | Descripiton                                                                                                 |\n|---------|-----------------------|---------|-------------------------------------------------------------------------------------------------------------|\n| modal | `string` \\| `React.FC`| `null`  | Either your modal's name (in case you've already passed that to `Reoverlay.config()`) or your modal component.|\n| props   | `object`              | `{}`    | Optional                                                 |\n\n```javascript\nimport { Reoverlay } from 'reoverlay';\nimport { MyModal } from '../modals';\n\nconst MyPage = () =\u003e {\n  const showModal = () =\u003e {\n    Reoverlay.showModal(MyModal);\n    // or Reoverlay.showModal(\"MyModal\")\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={showModal}\u003eShow modal\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n##### `hideModal(modalName)`\n\n| Name        |  Type    |  Default  | Descripiton                                                                           |\n|-------------|----------|-----------|---------------------------------------------------------------------------------------|\n| modalName | `string` | `null`    | Optional. Specifies which modal gets hidden. By default, the last visible modal gets hidden. |\n\n```javascript\nimport { Reoverlay, ModalWrapper } from 'reoverlay';\n\nconst MyModal = () =\u003e {\n  const closeModal = () =\u003e {\n    Reoverlay.hideModal();\n  }\n\n  return (\n    \u003cModalWrapper\u003e\n      \u003ch1\u003eMy modal content...\u003c/h1\u003e\n      \u003cbutton onClick={closeModal}\u003eClose modal\u003c/button\u003e\n    \u003c/ModalWrapper\u003e\n  )\n}\n\nconst MyPage = () =\u003e {\n  const showModal = () =\u003e {\n    Reoverlay.showModal(MyModal);\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={showModal}\u003eShow modal\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n##### `hideAll()`\nThis comes in handy when dealing with multiple modals on top of each other (aka \"Stacked Modals\"). With this, you can hide all modals at once.\n\n### `ModalWrapper` props\n\n| Name                      | Type                                                                                                        | Default                       | Descripiton                                              |\n|---------------------------|-------------------------------------------------------------------------------------------------------------|-------------------------------|----------------------------------------------------------|\n| wrapperClassName          | `string`                                                                                                      | `''`                            | Additional CSS class for modal wrapper element.           |\n| contentContainerClassName | `string`                                                                                                      | `''`                            | Additional CSS class for modal content container element. |\n| animation                 | `'fade'` \\| `'zoom'` \\| `'flip'` \\| `'door'` \\| `'rotate'` \\| `'slideUp'` \\| `'slideDown'` \\| `'slideLeft'` \\| `'slideRight'` | `'fade'`                        | A preset of various animations for your modal.           |\n| onClose                   | `function`                                                                                                    | `() =\u003e Reoverlay.hideModal()` | Gets called when the user clicks outside modal content.      |\n\n## Support ❤️\n\nPRs are welcome! You can also [buy me a coffee](https://buymeacoffee.com/hiradary) if you wish.\n\n## LICENSE\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiradary%2Freoverlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiradary%2Freoverlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiradary%2Freoverlay/lists"}