https://github.com/wallpants/use-confirm-hook
Replace your browser's "window.confirm" with a custom React Component.
https://github.com/wallpants/use-confirm-hook
browser confirm react shadcn-ui
Last synced: about 2 months ago
JSON representation
Replace your browser's "window.confirm" with a custom React Component.
- Host: GitHub
- URL: https://github.com/wallpants/use-confirm-hook
- Owner: wallpants
- Created: 2024-05-21T04:38:15.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-05-22T22:22:38.000Z (12 months ago)
- Last Synced: 2024-05-23T05:43:32.838Z (12 months ago)
- Topics: browser, confirm, react, shadcn-ui
- Language: TypeScript
- Homepage:
- Size: 76.2 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# use-confirm-hook
Replace your browser's `window.confirm` with a custom _React Component_.
This module is released as a TypeScript module, make sure your bundler supports them.
Tested with [vite](https://vitejs.dev/) and [bun](https://bun.sh/).
## Install
```bash
bun add use-confirm-hook
```
## Usage
Create your custom confirm component:
```tsx
// confirm-dialog.tsx
import { useConfirm } from "use-confirm-hook";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "./ui/alert-dialog";
export const ConfirmDialog = () => {
const { isAsking, message, deny, confirm } = useConfirm();
return (
Confirm
{message}
Cancel
Confirm
);
};
```
At the very root of your React App add the _Provider_ and your _React Component_.
```tsx
import { UseConfirmProvider } from "use-confirm-hook";
import { ConfirmDialog } from "./confirm-dialog";
import { App } from "./app";
export default function Root() {
return (
);
}
```
Ask the user to confirm an action:
```tsx
import { useConfirm } from "use-confirm-hook";
export default function Component() {
const { ask } = useConfirm();
function handleDelete() {
const res = await ask("Are you sure?");
if (res) {
console.log("continue with deletion");
} else {
console.log("don't delete");
}
}
return (
Delete
);
}
```
## Credits
This project is a simplified version of [https://github.com/tsivinsky/use-confirm](https://github.com/tsivinsky/use-confirm).