@razmisoft/react-confirm

A beautiful, flexible, and fully-featured confirmation dialog component for React applications. Built with TypeScript, Tailwind CSS, and Radix UI for maximum flexibility and accessibility.

Table of Contents

• Installation
• Usage
• API Reference
• License
• Author
• Contributors

Installation

Using npm:

1npm install @razmisoft/react-confirm

Using yarn:

1yarn add @razmisoft/react-confirm

Using pnpm:

1pnpm add @razmisoft/react-confirm

Usage

Import CSS for @razmisoft/react-confirm at the root of your application:

1import "@razmisoft/react-confirm/styles.css";

Using Global Provider

Wrap your app with ConfirmProvider:

1import { ConfirmProvider } from "@razmisoft/react-confirm";
2
3function App() {
4  return (
5    <ConfirmProvider>
6      <YourApp />
7    </ConfirmProvider>
8  );
9}

Use the useConfirm hook anywhere in your app:

1import { useConfirm } from "@razmisoft/react-confirm";
2
3function DeleteButton() {
4  const { confirm } = useConfirm();
5
6  return (
7    <button
8      onClick={() =>
9        confirm({
10          title: "Delete Item",
11          description: "Are you sure you want to delete this item?",
12          onConfirm: () => {
13            // Delete the item
14          },
15        })
16      }
17    >
18      Delete
19    </button>
20  );
21}

Using Dialog Component

You can create and manage your own dialog component:

1import {
2  Dialog,
3  DialogContent,
4  DialogHeader,
5  DialogTitle,
6  DialogDescription,
7  DialogFooter,
8  type ConfirmDialogProps,
9} from "@razmisoft/react-confirm";
10
11function CustomDialog({
12  open,
13  onOpenChange,
14  onConfirm,
15  onCancel,
16  title = "Confirm Action",
17  description,
18  confirmText = "Confirm",
19  cancelText = "Cancel",
20  icon,
21  variant = "default",
22}: ConfirmDialogProps) {
23  const [isLoading, setIsLoading] = useState(false);
24  const [error, setError] = useState<string>();
25  const [success, setSuccess] = useState<string>();
26
27  // Reset state when dialog opens/closes
28  useEffect(() => {
29    if (!open) {
30      setIsLoading(false);
31      setError(undefined);
32      setSuccess(undefined);
33    }
34  }, [open]);
35
36  const handleConfirm = async () => {
37    setIsLoading(true);
38    setError(undefined);
39    setSuccess(undefined);
40
41    try {
42      await onConfirm();
43      setSuccess("Operation completed successfully");
44      setTimeout(() => onOpenChange(false), 1500);
45    } catch (err) {
46      setError(err instanceof Error ? err.message : "An error occurred");
47    } finally {
48      setIsLoading(false);
49    }
50  };
51
52  const getStatusIcon = () => {
53    if (isLoading)
54      return (
55        <LoaderIcon className="animate-spin text-blue-600" aria-hidden="true" />
56      );
57    if (error) return <XIcon className="text-red-600" aria-hidden="true" />;
58    if (success)
59      return <CheckIcon className="text-green-600" aria-hidden="true" />;
60    return (
61      icon || (
62        <AlertTriangleIcon className="text-yellow-600" aria-hidden="true" />
63      )
64    );
65  };
66
67  return (
68    <Dialog open={open} onOpenChange={onOpenChange}>
69      <DialogContent>
70        <DialogHeader>
71          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-slate-100">
72            {getStatusIcon()}
73          </div>
74          <DialogTitle className="text-center">{title}</DialogTitle>
75          {description && !error && !success && (
76            <DialogDescription className="text-center">
77              {description}
78            </DialogDescription>
79          )}
80          {error && (
81            <DialogDescription className="text-center text-red-600">
82              {error}
83            </DialogDescription>
84          )}
85          {success && (
86            <DialogDescription className="text-center text-green-600">
87              {success}
88            </DialogDescription>
89          )}
90        </DialogHeader>
91        <DialogFooter className="sm:justify-center">
92          <Button variant="outline" onClick={onCancel} disabled={isLoading}>
93            {cancelText}
94          </Button>
95          <Button
96            variant={variant}
97            onClick={handleConfirm}
98            loading={isLoading}
99            loadingText="Loading..."
100            disabled={isLoading}
101          >
102            {confirmText}
103          </Button>
104        </DialogFooter>
105      </DialogContent>
106    </Dialog>
107  );
108}

API Reference

ConfirmProvider

The ConfirmProvider component provides wraps your app with a context provider and adds a ConfirmDialog component to the root of the app. It accepts the following props:

1interface ConfirmProviderProps {
2  children: React.ReactNode;
3}

useConfirm

The useConfirm hook provides is used to show a confirmation dialog. It returns an object with the following functions:

• confirm: A function that shows a confirmation dialog. It accepts the following props:

  1interface ConfirmOptions {
  2  title?: string;
  3  description?: string;
  4  confirmText?: string;
  5  cancelText?: string;
  6  onConfirm: () => Promise<void>;
  7  onCancel?: () => void;
  8}

• updateDialog: A function that updates the dialog content. It accepts the following props:

  1interface UpdateDialogOptions {
  2  title?: string;
  3  description?: string;
  4  confirmText?: string;
  5  cancelText?: string;
  6}

• closeDialog: A function that closes the dialog.

confirm and updateDialog functions accept DialogOptions object with the following properties:

1interface DialogOptions {
2  title?: string;
3  description?: string;
4  confirmText?: string;
5  cancelText?: string;
6  icon?: React.ReactNode;
7  variant?: "default" | "destructive";
8  onConfirm?: () => Promise<void>;
9}

Async Operations

The onConfirm function passed to the confirm function should return a promise. The dialog will show a loading spinner until the promise is resolved or rejected.

ConfirmDialog

A fully customizable dialog component that can be used to show confirmation dialogs. It accepts the following props:

1interface ConfirmDialogProps {
2  open: boolean;
3  onOpenChange: (open: boolean) => void;
4  onConfirm: () => Promise<void>;
5  onCancel: () => void;
6  title?: string;
7  description?: string;
8  confirmText?: string;
9  cancelText?: string;
10  icon?: React.ReactNode;
11  variant?: "default" | "destructive";
12}

When you wrap your app with ConfirmProvider, a ConfirmDialog component is added to the root of the app. You don't need to use this component directly unless you want to create a custom dialog component.

useConfirmation

The useConfirmation hook is used to show a confirmation dialog. It returns an object with the following functions:

• confirm: A function that shows a confirmation dialog. It accepts the following props:

  1  interface ConfirmOptions IUseConfirmation {
  2      isOpen: boolean;
  3      options: DialogOptions;
  4      confirm: (options?: ConfirmationOptions) => Promise<boolean>;
  5      updateDialog: (options: Partial<DialogOptions>) => void;
  6      handleConfirm: () => Promise<void>;
  7      handleCancel: () => void;
  8  }

  If you are using a custom dialog component and want to manage the dialog state yourself, you can use this hook since it extracts the dialog state management logic.

Best Practices

1. Global vs Local Dialogs

• Use useConfirm for app-wide confirmations
• Use useConfirmation with custom UI for localized dialogs

2. Error Handling

• Always handle async operations in onConfirm
• Use try/catch blocks for error states

3. Accessibility

• Provide descriptive titles and descriptions
• Use appropriate ARIA labels
• Ensure keyboard navigation works

4. UI/UX Guidelines

• Use appropriate variants for different actions
• Keep descriptions clear and concise
• Show loading states during async operations

License

MIT © sadamkhan7679

Author

sadamkhan7679 (https://github.com/sadamkhan7679)

Contributors

• List of contributors

Want to contribute? Check out our Contributing Guide.