{"id":13450444,"url":"https://github.com/microcmsio/react-hooks-use-modal","last_synced_at":"2025-04-05T13:03:02.228Z","repository":{"id":39395527,"uuid":"206801432","full_name":"microcmsio/react-hooks-use-modal","owner":"microcmsio","description":"This is a customizable modal with react-portal.","archived":false,"fork":false,"pushed_at":"2023-03-15T10:12:52.000Z","size":1231,"stargazers_count":171,"open_issues_count":5,"forks_count":21,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-03T00:11:23.212Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://microcmsio.github.io/react-hooks-use-modal/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microcmsio.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-09-06T13:37:07.000Z","updated_at":"2024-08-01T22:30:11.000Z","dependencies_parsed_at":"2024-01-07T11:11:28.157Z","dependency_job_id":"dc0cd8f6-efc1-4270-8cfd-05a7ca631e93","html_url":"https://github.com/microcmsio/react-hooks-use-modal","commit_stats":{"total_commits":123,"total_committers":13,"mean_commits":9.461538461538462,"dds":0.6504065040650406,"last_synced_commit":"22036340596cbbeeca41538d0f7f7cffb9f8c003"},"previous_names":["shibe97/react-portal-modal","shibe97/react-hooks-use-modal"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcmsio%2Freact-hooks-use-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcmsio%2Freact-hooks-use-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcmsio%2Freact-hooks-use-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcmsio%2Freact-hooks-use-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microcmsio","download_url":"https://codeload.github.com/microcmsio/react-hooks-use-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339149,"owners_count":20923014,"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":[],"created_at":"2024-07-31T07:00:34.685Z","updated_at":"2025-04-05T13:03:02.196Z","avatar_url":"https://github.com/microcmsio.png","language":"TypeScript","readme":"# useModal\n\nThis is a react hook which can open the modal easily.\n\n## Usage\n\n```javascript\nimport React, { useState, useCallback } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { useModal } from 'react-hooks-use-modal';\n\nconst App = () =\u003e {\n  const [Modal, open, close, isOpen] = useModal('root', {\n    preventScroll: true,\n    focusTrapOptions: {\n      clickOutsideDeactivates: false,\n    },\n  });\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eModal is Open? {isOpen ? 'Yes' : 'No'}\u003c/p\u003e\n      \u003cbutton onClick={open}\u003eOPEN\u003c/button\u003e\n      \u003cModal\u003e\n        \u003cdiv\u003e\n          \u003ch1\u003eTitle\u003c/h1\u003e\n          \u003cp\u003eThis is a customizable modal.\u003c/p\u003e\n          \u003cbutton onClick={close}\u003eCLOSE\u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/Modal\u003e\n    \u003c/div\u003e\n  );\n};\nconst root = createRoot(document.getElementById('root'));\nroot.render(\u003cApp /\u003e);\n```\n\n## Syntax\n\n### [ModalComponent, openFunc, closeFunc, isOpenBool] = useModal(domNode?, { initialValue?, preventScroll?, focusTrapOptions?, components? })\n\n`ModalComponent`\nType: React.FC\u003c{ title?: React.ReactNode; description?: React.ReactNode, children?: React.ReactNode, additionalProps?: Record\u003cstring, unknown\u003e }\u003e\nModal component that displays children in the screen center.\nIf you specify `title` and `description`, `additionalProps` you must implement custom components with the `components` option's `Modal` property and render in them.\nSee EXAMPLE below for details.\nhttps://github.com/microcmsio/react-hooks-use-modal/blob/master/examples/src/js/components-option/index.tsx\n\n`openFunc`\nA function to open modal.\n\n`closeFunc`\nA function to close modal.\n\n`isOpenBool`\nA boolean to know the state whether modal is open or not.\n\n`domNode`\nOptional.\nDefault value is 'root'.\nModal component uses React-Portal.\nYou can specify the output destination domNode with this argument\n\n`initialValue`\nOptional.\nDefault value is false.\nThis is useful when you want to mount the modal in an open position.\n\n`preventScroll`\nOptional to prevent scrolling while modal is open.\nDefault value is false.\n\n`focusTrapOptions`\nOverride the focus-trap options used internally.\nFor example, to prevent a modal from closing when a non-modal element is clicked, do the following\n\n```jsx\nuseModal('root', {\n  focusTrapOptions: {\n    clickOutsideDeactivates: false,\n  },\n});\n```\n\n`components`\nOptional.\nThis is an option to customize the `ModalWrapper` returned by useModal.\nUse as follows\n\n```jsx\nuseModal('root', {\n  components: {\n    Modal: ({ title, description, children }) =\u003e {\n      return (\n        \u003cdiv\n          style={{\n            padding: '60px 100px',\n            backgroundColor: '#fff',\n            borderRadius: '10px',\n          }}\n        \u003e\n          {title \u0026\u0026 \u003ch1\u003e{title}\u003c/h1\u003e}\n          {description \u0026\u0026 \u003cp\u003e{description}\u003c/p\u003e}\n          {children}\n        \u003c/div\u003e\n      );\n    },\n    Overlay: () =\u003e {\n      return (\n        \u003cdiv\n          style={{\n            position: 'fixed',\n            top: 0,\n            left: 0,\n            bottom: 0,\n            right: 0,\n            backgroundColor: 'rgba(0, 0, 0, 0.5)',\n          }}\n        /\u003e\n      );\n    },\n    Wrapper: ({ children }) =\u003e {\n      return (\n        \u003cdiv\n          style={{\n            position: 'fixed',\n            top: 0,\n            left: 0,\n            bottom: 0,\n            right: 0,\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n            zIndex: 1000,\n          }}\n        \u003e\n          {children}\n        \u003c/div\u003e\n      );\n    },\n  },\n});\n```\n\nCombined with `ModalProvider` (described below), you can specify the default style for all `useModal` in the project.\n\n## Global Settings\n\nThe `ModalProvider` component allows you to apply a common default configuration to all `useModal` hooks.\n\n```jsx\n\u003cModalProvider {...options}\u003e\n  \u003cComponent /\u003e\n\u003c/ModalProvider\u003e\n```\n\nThe following example sets all `useModal` hooks to not scroll outside the modal by default.\n\n```jsx\nconst Component1 = () =\u003e {\n  const [Modal] = useModal('root');\n  return (\n    \u003cModal\u003e\n      \u003ch2\u003eCommon\u003c/h2\u003e\n    \u003c/Modal\u003e\n  );\n};\nconst Component2 = () =\u003e {\n  const [Modal] = useModal('root', { preventScroll: false }); // override\n  return (\n    \u003cModal\u003e\n      \u003ch2\u003eOverride options\u003c/h2\u003e\n    \u003c/Modal\u003e\n  );\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cModalProvider preventScroll\u003e\n      \u003cComponent1 /\u003e\n      \u003cComponent2 /\u003e\n    \u003c/ModalProvider\u003e\n  );\n};\n```\n\n## Demo\n\nhttps://microcmsio.github.io/react-hooks-use-modal/\n\n## How To Develop\n\n### Setup\n\n```\n$ yarn\n```\n\n### Build src\n\n```\n$ yarn build\n```\n\n### Watch src\n\n```\n$ yarn watch\n```\n\n### Start demo\n\n```\n$ yarn start:demo\n```\n\nThen access it on http://localhost:3001/react-hooks-use-modal\n\n## License\n\nMIT\n","funding_links":[],"categories":["Packages","TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrocmsio%2Freact-hooks-use-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrocmsio%2Freact-hooks-use-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrocmsio%2Freact-hooks-use-modal/lists"}