{"id":22893333,"url":"https://github.com/yet3/use-modal","last_synced_at":"2025-03-31T22:32:44.062Z","repository":{"id":57749636,"uuid":"524679464","full_name":"yet3/use-modal","owner":"yet3","description":"React hook to make using modals easier","archived":false,"fork":false,"pushed_at":"2022-08-31T13:45:34.000Z","size":101,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T03:32:14.726Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/yet3.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}},"created_at":"2022-08-14T13:27:49.000Z","updated_at":"2022-08-14T17:16:31.000Z","dependencies_parsed_at":"2022-08-28T06:11:02.174Z","dependency_job_id":null,"html_url":"https://github.com/yet3/use-modal","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/yet3%2Fuse-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yet3%2Fuse-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yet3%2Fuse-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yet3%2Fuse-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yet3","download_url":"https://codeload.github.com/yet3/use-modal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246552446,"owners_count":20795821,"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-12-13T23:14:05.144Z","updated_at":"2025-03-31T22:32:44.038Z","avatar_url":"https://github.com/yet3.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# useModal\n\n![GitHub license](https://img.shields.io/github/license/yet3/use-modal?style=flat)\n\u003ca href='https://www.npmjs.com/package/@yet3/use-modal'\u003e\n  ![npm](https://img.shields.io/npm/v/@yet3/use-modal)\n\u003c/a\u003e\n\nReact hook that makes using modals easier.\n\n### Table of Contents\n- [Installation](#installation)\n- [Usage](#simple-usage)\n  - [Simple](#simple-usage)\n  - [With props](#with-props)\n  - [With modalWrapper](#with-modalwrapper)\n- [Options](#options)\n\n### Installation\n\n```sh\nyarn add @yet3/use-modal\n```\n\nor with npm\n\n```sh\nnpm install @yet3/use-modal\n```\n\n### Simple usage\n\n```tsx\nimport { useModal } from '@yet3/use-modal';\n\nconst MyModal = () =\u003e {\n  return ( \n    ...\n  )\n}\n\nconst Component = () =\u003e {\n  const modal = useModal(MyModal)\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={modal.open}\u003eOpen modal\u003c/button\u003e\n      {modal.component}\n    \u003c/div\u003e\n  )\n}\n```\n\n### Options\n```ts\nexport interface BackdropOptions {\n  backdropColor: string;\n  closeOnBackdropClick?: boolean\n  onBackdropClick?: (d: {closeModal: ModalCloseFunc}) =\u003e void | null | false\n  backdropStyle?: CSSProperties\n}\n\nexport interface CommonOptions {\n  closeAfter?: null | false | number;\n  portalElement?: PortalElement | null;\n\n  backdropColor?: string | null | false;\n  backdrop?: boolean | null | JSX.Element | ((children: ReactNode, opts: BackdropOptions) =\u003e JSX.Element);\n  closeOnBackdropClick?: boolean\n  onBackdropClick?: (d: {closeModal: ModalCloseFunc}) =\u003e void | null | false\n  backdropStyle?: CSSProperties\n  modalWrapper?: false | null | ((children: ReactNode, opts: ModalWrapperOptions) =\u003e JSX.Element) | JSX.Element;\n}\n\n// Options passed via UseModal.setOptions(Options)\nexport interface UseModalOptions extends CommonOptions {\n  startOpen?: boolean;\n}\n\n// Options passed to useModal(Options) hook\nexport interface UseModalHookOptions\u003cP extends ModalProps\u003e extends CommonOptions {\n  startOpen?: boolean;\n  props?: Partial\u003cP\u003e;\n}\n\n// Options passed to open/toggle functions\nexport interface ModalOptions\u003cP extends ModalProps\u003e extends CommonOptions {\n  props?: P;\n}\n```\n\n### useModal\n\nuseModal hook returns:\n- isOpen: boolean - whether modal is open\n- open: (options?: [ModalOptions](#options)) =\u003e void - function to open modal\n- close: () =\u003e void - function to close modal\n- toggle: (options?: [ModalOptions](#options)) =\u003e void - function to open/close modal\n- component: ReactPortal | null - modal's portal\n- options: [ModalOptions](#options) | null - when modal's open will return its options otherwise will return null\n\n\n### UseModal\n\n\n### Other type\n- ModalCloseFunc: () =\u003e void\n- ModalBaseProps:\n  - closeModal: [ModalCloseFunc](#other-type) - function passed to every modal that allows to close it \n\n\n## Examples\n### With props\n```tsx\nimport { useModal, ModalBaseProps } from '@yet3/use-modal';\n\ninterface ModalProps extends ModalBaseProps {\n  text: string;\n  color?: string;\n}\n\nconst MyModal = ({ closeModal, text, color = 'black' }: ModalProps) =\u003e {\n  return (\n    \u003caside\n      style={{\n        position: 'fixed',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n        backgroundColor: 'white',\n        border: '1px solid rgb(150, 150, 150)',\n        padding: 16,\n      }}\n    \u003e\n      \u003cheader style={{ fontSize: 18, fontWeight: 'bold' }}\u003eSuper cool modal\u003c/header\u003e\n      \u003cmain style={{ color: color }}\u003e{text}\u003c/main\u003e\n      \u003cfooter\u003e\n        \u003cbutton onClick={closeModal} style={{ border: '1px solid rgb(200, 200, 200)', padding: 4, cursor: 'pointer' }}\u003e\n          Close\n        \u003c/button\u003e\n      \u003c/footer\u003e\n    \u003c/aside\u003e\n  );\n};\n\nconst Component = () =\u003e {\n  const modal = useModal(MyModal, { props: { color: 'red' } });\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e modal.open({ props: { text: 'Super cool text' } })}\u003eOpen modal\u003c/button\u003e\n      {modal.component}\n    \u003c/div\u003e\n  );\n};\n```\n## With modalWrapper\n```tsx\nimport { useModal, ModalBaseProps, UseModal } from '../../src';\n\nUseModal.setOptions({\n  modalWrapper: (\n    \u003caside\n      style={{\n        position: 'fixed',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n        backgroundColor: 'white',\n        border: '1px solid rgb(150, 150, 150)',\n        padding: 16,\n      }}\n    /\u003e\n  ),\n});\n\nconst FirstModal = ({ closeModal }: ModalBaseProps) =\u003e {\n  return (\n    \u003c\u003e\n      \u003cspan\u003eFirst Modal\u003c/span\u003e\n      \u003cbutton\n        onClick={closeModal}\n        style={{ marginLeft: 5, border: '1px solid rgb(200, 200, 200)', padding: 4, cursor: 'pointer' }}\n      \u003e\n        Close\n      \u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n\nconst SecondModal = ({ closeModal }: ModalBaseProps) =\u003e {\n  return (\n    \u003c\u003e\n      \u003cspan\u003eSecond Modal\u003c/span\u003e\n      \u003cbutton\n        onClick={closeModal}\n        style={{ marginLeft: 5, border: '1px solid rgb(200, 200, 200)', padding: 4, cursor: 'pointer' }}\n      \u003e\n        Close\n      \u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n\nconst Component = () =\u003e {\n  const modal1 = useModal(FirstModal);\n  const modal2 = useModal(SecondModal, {\n    backdropColor: 'rgba(255, 100, 100, 0.7)',\n  });\n\n  return (\n    \u003cdiv style={{ display: 'flex', flexDirection: 'column' }}\u003e\n      \u003cbutton onClick={() =\u003e modal1.toggle()}\u003eToggle modal 1\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e modal2.toggle()}\u003eToggle modal 2\u003c/button\u003e\n      {modal1.component}\n      {modal2.component}\n    \u003c/div\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyet3%2Fuse-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyet3%2Fuse-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyet3%2Fuse-modal/lists"}