{"id":14987557,"url":"https://github.com/theodorusclarence/dialog-manager","last_synced_at":"2025-06-14T15:03:35.448Z","repository":{"id":46043766,"uuid":"415578236","full_name":"theodorusclarence/dialog-manager","owner":"theodorusclarence","description":"💬 Dialog Manager using TypeScript, Zustand with Immer, and Tailwind CSS","archived":false,"fork":false,"pushed_at":"2021-10-10T14:51:57.000Z","size":450,"stargazers_count":26,"open_issues_count":0,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-19T01:45:26.218Z","etag":null,"topics":["nextjs","tailwindcss","typescript","zustand"],"latest_commit_sha":null,"homepage":"https://dialog.thcl.dev/","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/theodorusclarence.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-10-10T12:23:13.000Z","updated_at":"2024-12-14T00:49:05.000Z","dependencies_parsed_at":"2022-07-18T21:34:20.141Z","dependency_job_id":null,"html_url":"https://github.com/theodorusclarence/dialog-manager","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/theodorusclarence/dialog-manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theodorusclarence%2Fdialog-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theodorusclarence%2Fdialog-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theodorusclarence%2Fdialog-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theodorusclarence%2Fdialog-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theodorusclarence","download_url":"https://codeload.github.com/theodorusclarence/dialog-manager/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theodorusclarence%2Fdialog-manager/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259835354,"owners_count":22918973,"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":["nextjs","tailwindcss","typescript","zustand"],"created_at":"2024-09-24T14:14:55.832Z","updated_at":"2025-06-14T15:03:35.426Z","avatar_url":"https://github.com/theodorusclarence.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dialog Manager\n\n![ts-nextjs-tailwind-starter](https://socialify.git.ci/theodorusclarence/dialog-manager/image?description=1\u0026language=1\u0026owner=1\u0026pattern=Charlie%20Brown\u0026stargazers=1\u0026theme=Dark)\n\n## Code to observe: \n- https://github.com/theodorusclarence/dialog-manager/blob/main/src/pages/index.tsx\n- https://github.com/theodorusclarence/dialog-manager/blob/main/src/hooks/useDialog.tsx\n- https://github.com/theodorusclarence/dialog-manager/blob/main/src/lib/zustand/useDialogStore.tsx\n- https://github.com/theodorusclarence/dialog-manager/blob/main/src/components/Layout.tsx\n- https://github.com/theodorusclarence/dialog-manager/blob/main/package.json\n\n## Key Points\n\n### Initialize the store and add the Alert\n\n```tsx\nimport * as React from 'react';\n\nimport useDialogStore from '@/lib/zustand/useDialogStore';\n\nimport Alert from '@/components/Alert';\n\nexport default function Layout({ children }: { children: React.ReactNode }) {\n  const { open, state, handleClose, handleSubmit } = useDialogStore();\n\n  return (\n    \u003c\u003e\n      {children}\n      \u003cAlert\n        onClose={handleClose}\n        onSubmit={handleSubmit}\n        open={open}\n        options={state}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### Call the dialog\n\n```tsx\nimport useDialog from '@/hooks/useDialog';\n\nconst dialog = useDialog();\n\ndialog({\n  title: 'Warning!',\n  description: (\n    \u003c\u003e\n      This is a \u003cstrong className='text-yellow-600'\u003ewarning dialog\u003c/strong\u003e.\n    \u003c/\u003e\n  ),\n  catchOnCancel: true,\n  submitText: 'Okay',\n  variant: 'warning',\n})\n  .then(() =\u003e setStatus('Warning Dialog: Submitted'))\n  .catch(() =\u003e setStatus('Warning Dialog: Rejected'));\n```\n\nIf you don't have to catch reject, you can omit `catchOnCancel`\n\n## Attribution\n\nCode is inspired from https://dev.to/dmtrkovalenko/the-neatest-way-to-handle-alert-dialogs-in-react-1aoe\n\nCheck it out if you prefer to use Context API\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheodorusclarence%2Fdialog-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheodorusclarence%2Fdialog-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheodorusclarence%2Fdialog-manager/lists"}