{"id":20691118,"url":"https://github.com/dotmind/react-modals","last_synced_at":"2025-04-22T16:58:54.256Z","repository":{"id":38309166,"uuid":"358205275","full_name":"dotmind/react-modals","owner":"dotmind","description":"React Modals is a tool to quickly generate modals","archived":false,"fork":false,"pushed_at":"2023-01-20T14:22:54.000Z","size":1673,"stargazers_count":8,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T17:01:23.583Z","etag":null,"topics":["modal","reactjs","typescript"],"latest_commit_sha":null,"homepage":"","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/dotmind.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-15T09:40:31.000Z","updated_at":"2022-12-12T09:44:58.000Z","dependencies_parsed_at":"2023-02-12T02:46:30.423Z","dependency_job_id":null,"html_url":"https://github.com/dotmind/react-modals","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotmind%2Freact-modals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotmind%2Freact-modals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotmind%2Freact-modals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotmind%2Freact-modals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dotmind","download_url":"https://codeload.github.com/dotmind/react-modals/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250284823,"owners_count":21405295,"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","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","reactjs","typescript"],"created_at":"2024-11-16T23:15:20.138Z","updated_at":"2025-04-22T16:58:54.236Z","avatar_url":"https://github.com/dotmind.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"Logo\" src=\"https://dotmind.io/wp-content/uploads/2022/04/react-modals-dotmind-2-scaled.jpg\" /\u003e\n\u003c/div\u003e\n\u003ch1 align=\"center\"\u003e\n  @dotmind/react-modals\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  React Modals is a tool to quickly generate modals\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/dotmind/react-modals\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@dotmind/react-modals\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/dotmind/react-modals\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/dotmind/react-modals\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/dotmind/react-modals\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/types/typescript\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Menu\n\n- [Menu](#menu)\n- [✋ Disclaimer](#-disclaimer)\n- [💻 Installation](#-installation)\n- [👷‍♂️ How it's work](#️-how-its-work)\n  - [Modal usage](#modal-usage)\n- [⚡️ Contributing](#️-contributing)\n- [🔐 License](#-license)\n\n## ✋ Disclaimer\n\nCreate quickly and easily modals for React. Builded by dotmind.io\nIf you’re familiar with the basics of React, you will know that because of its structure you can face some serious CSS issues when you need to show a modal.\nWith this package you can :\n\n- clip your modal on any page\n- say goodbye to CSS issues\n- saving time and simply customize\n\nLet's code 🚀.\n\nIf you use React \u003c 18, please use version 2.0.2 ([React 18 changelog](https://reactjs.org/blog/2022/03/29/react-v18.html#new-client-and-server-rendering-apis))\n\nVersion 2.0.3+ require React 18+\n\n## 💻 Installation\n\n```bash\nyarn add @dotmind/react-modals\n```\n\nor\n\n```bash\nnpm i @dotmind/react-modals\n```\n\n## 👷‍♂️ How it's work\n\n\u003cp align=\"center\"\u003e\n  \u003ca target=\"_blank\" href=\"https://codesandbox.io/s/react-modals-jumgq\"\u003e\n    React Modals sandbox\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Modal usage\n\n```javascript\nimport React, { useCallback, useState } from 'react';\n\nimport Modal from '@dotmind/react-modals';\n\nconst App: React.FC = () =\u003e {\n  const [modalOpen, setModalOpen] = useState(false);\n\n  const handleChangeModal = useCallback(() =\u003e {\n    setModalOpen((prevState) =\u003e !prevState);\n  }, [setModalOpen]);\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eTest react modal\u003c/h1\u003e\n      \u003cbutton onClick={handleChangeModal}\u003eClick me !\u003c/button\u003e\n      \u003cModal\n        modalOpen={modalOpen}\n        onClose={handleChangeModal}\n        containerZIndex={9999}\n      \u003e\n        \u003ch1\u003eThis is modal content\u003c/h1\u003e\n        \u003cp\u003eYou can put your html here, have fun !\u003c/p\u003e\n      \u003c/Modal\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n| props                | description                      | required | type                   |\n| -------------------- | -------------------------------- | -------- | ---------------------- |\n| modalOpen            | Modal state                      | true     | boolean                |\n| onClose              | Close modal function             | true     | () =\u003e void             |\n| children             | Modal content                    | true     | ReactNode              |\n| containerZIndex      | Add custom z-index to container  | false    | number                 |\n| closeButtonElement   | Modify close button element      | false    | ReactElement or string |\n| closeButtonClassName | Add custom class on close button | false    | string                 |\n| containerClassName   | Add custom class on container    | false    | string                 |\n| contentClassName     | Add custom class on content      | false    | string                 |\n| closeOnClickOutside  | Close modal on click outside     | false    | boolean                |\n| showCloseButton      | Hide or show button button       | false    | boolean                |\n| withShadow           | Add default box shadow           | false    | boolean                |\n\n## ⚡️ Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\nPlease make sure to update tests as appropriate.\n\n## 🔐 License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdotmind%2Freact-modals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdotmind%2Freact-modals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdotmind%2Freact-modals/lists"}