{"id":16395687,"url":"https://github.com/wallpants/use-confirm-hook","last_synced_at":"2026-01-06T03:06:36.687Z","repository":{"id":240856592,"uuid":"803620854","full_name":"wallpants/use-confirm-hook","owner":"wallpants","description":"Replace your browser's \"window.confirm\" with a custom React Component.","archived":false,"fork":false,"pushed_at":"2024-05-22T22:22:38.000Z","size":78,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-23T05:43:32.838Z","etag":null,"topics":["browser","confirm","react","shadcn-ui"],"latest_commit_sha":null,"homepage":"","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/wallpants.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-21T04:38:15.000Z","updated_at":"2024-05-30T04:08:48.643Z","dependencies_parsed_at":"2024-05-21T05:42:05.787Z","dependency_job_id":"8da89d9a-b345-4d75-8a66-b996380e2761","html_url":"https://github.com/wallpants/use-confirm-hook","commit_stats":null,"previous_names":["wallpants/use-confirm-hook"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wallpants%2Fuse-confirm-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wallpants%2Fuse-confirm-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wallpants%2Fuse-confirm-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wallpants%2Fuse-confirm-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wallpants","download_url":"https://codeload.github.com/wallpants/use-confirm-hook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245056889,"owners_count":20553854,"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":["browser","confirm","react","shadcn-ui"],"created_at":"2024-10-11T05:05:23.570Z","updated_at":"2026-01-06T03:06:36.648Z","avatar_url":"https://github.com/wallpants.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-confirm-hook\n\nReplace your browser's `window.confirm` with a custom _React Component_.\n\nThis module is released as a TypeScript module, make sure your bundler supports them.\n\nTested with [vite](https://vitejs.dev/) and [bun](https://bun.sh/).\n\n\u003chttps://github.com/wallpants/use-confirm-hook/assets/47203170/203b7e0e-ce96-4550-9ced-ac0ee14cb6d0\u003e\n\n## Install\n\n```bash\nbun add use-confirm-hook\n```\n\n## Usage\n\nCreate your custom confirm component:\n\n```tsx\n// confirm-dialog.tsx\nimport { useConfirm } from \"use-confirm-hook\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from \"./ui/alert-dialog\";\n\nexport const ConfirmDialog = () =\u003e {\n  const { isAsking, message, deny, confirm } = useConfirm();\n\n  return (\n    \u003cAlertDialog open={isAsking} onOpenChange={deny}\u003e\n      \u003cAlertDialogContent\u003e\n        \u003cAlertDialogHeader\u003e\n          \u003cAlertDialogTitle\u003eConfirm\u003c/AlertDialogTitle\u003e\n          \u003cAlertDialogDescription\u003e{message}\u003c/AlertDialogDescription\u003e\n        \u003c/AlertDialogHeader\u003e\n        \u003cAlertDialogFooter\u003e\n          \u003cAlertDialogCancel onClick={deny}\u003eCancel\u003c/AlertDialogCancel\u003e\n          \u003cAlertDialogAction onClick={confirm}\u003eConfirm\u003c/AlertDialogAction\u003e\n        \u003c/AlertDialogFooter\u003e\n      \u003c/AlertDialogContent\u003e\n    \u003c/AlertDialog\u003e\n  );\n};\n```\n\nAt the very root of your React App add the _Provider_ and your _React Component_.\n\n```tsx\nimport { UseConfirmProvider } from \"use-confirm-hook\";\nimport { ConfirmDialog } from \"./confirm-dialog\";\nimport { App } from \"./app\";\n\nexport default function Root() {\n  return (\n    \u003cUseConfirmProvider\u003e\n      \u003cApp /\u003e\n      \u003cConfirmDialog /\u003e\n    \u003c/UseConfirmProvider\u003e\n  );\n}\n```\n\nAsk the user to confirm an action:\n\n```tsx\nimport { useConfirm } from \"use-confirm-hook\";\n\nexport default function Component() {\n  const { ask } = useConfirm();\n\n  function handleDelete() {\n    const res = await ask(\"Are you sure?\");\n    if (res) {\n      console.log(\"continue with deletion\");\n    } else {\n      console.log(\"don't delete\");\n    }\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={handleDelete}\u003eDelete\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Credits\n\nThis project is a simplified version of [https://github.com/tsivinsky/use-confirm](https://github.com/tsivinsky/use-confirm).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwallpants%2Fuse-confirm-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwallpants%2Fuse-confirm-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwallpants%2Fuse-confirm-hook/lists"}