useConfirmAction

A custom React hook to display a confirmation dialog before executing an action. Useful for actions that require user confirmation, such as deletions or irreversible changes.

Usage

import { useConfirmAction } from "@/hooks/use-confirm-action";

const DeleteButton = () => {
  const { confirm, ConfirmDialog } = useConfirmAction();

  const handleDelete = () => {
    // your delete logic here
  };

  return (
    <>
      <button
        onClick={() =>
          confirm(handleDelete, {
            title: "Delete Item",
            description: "Are you sure you want to delete this item?",
            confirmText: "Delete",
            cancelText: "Cancel",
          })
        }
      >
        Delete
      </button>
      <ConfirmDialog />
    </>
  );
};

API

confirm(action, options?, enabled?)

• action: () => void
  The function to execute if the user confirms.

• options?: ConfirmOptions
  Optional dialog customization:

  • title?: string – Dialog title (default: "Confirm Action")
  • description?: string – Dialog description (default: "Are you sure you want to perform this action?")
  • confirmText?: string – Confirm button text (default: "Confirm")
  • cancelText?: string – Cancel button text (default: "Cancel")

• enabled?: boolean
  If false, the action is executed immediately without confirmation (default: true).

ConfirmDialog

A React component. Render this once in your component tree (usually near the root or inside the component using the hook).