Confirmation Dialog

Confirmation dialogs are used when a user decision is required. They typically return a boolean value and are used to obtain user consent before performing dangerous operations.

Basic Confirmation#

Get confirmation before important operations like deletion:

const handleDelete = async () => {
  const confirmed = await grunfeld.add<boolean>((removeWith) => ({
    element: (
      <div style={{ padding: "20px", background: "white", borderRadius: "8px" }}>
        <h3>Confirm Delete</h3>
        <p>Are you sure you want to delete? This action cannot be undone.</p>
        <div style={{ display: "flex", gap: "8px", marginTop: "16px" }}>
          <button
            onClick={() => removeWith(true)}
            style={{ background: "#c00", color: "white" }}
          >
            Delete
          </button>
          <button onClick={() => removeWith(false)}>
            Cancel
          </button>
        </div>
      </div>
    ),
  }));

  if (confirmed) {
    await deleteItem();
    console.log("Deleted");
  }
};

Destructive Confirmation#

For critical operations, you can require users to confirm the action:

const DestructiveConfirm = ({ onConfirm }: { onConfirm: (value: boolean) => void }) => {
  const [inputValue, setInputValue] = useState("");
  const confirmText = "DELETE";

  return (
    <div style={{ padding: "20px", background: "white", borderRadius: "8px" }}>
      <h3>⚠️ Dangerous Action</h3>
      <p>To proceed, type "{confirmText}".</p>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder={confirmText}
        style={{ width: "100%", padding: "8px", marginTop: "8px" }}
      />
      <div style={{ display: "flex", gap: "8px", marginTop: "16px" }}>
        <button
          onClick={() => onConfirm(true)}
          disabled={inputValue !== confirmText}
          style={{
            background: inputValue === confirmText ? "#c00" : "#ccc",
            color: "white",
          }}
        >
          Delete
        </button>
        <button onClick={() => onConfirm(false)}>Cancel</button>
      </div>
    </div>
  );
};

const handleDangerousDelete = async () => {
  const confirmed = await grunfeld.add<boolean>((removeWith) => ({
    element: <DestructiveConfirm onConfirm={removeWith} />,
    lightDismiss: false,
  }));

  if (confirmed) {
    await performDangerousAction();
  }
};

Conditional Actions#

Perform different actions based on confirmation result:

const saveChanges = async () => {
  if (!hasChanges) {
    await save();
    return;
  }

  const confirmed = await grunfeld.add<boolean>((removeWith) => ({
    element: (
      <div>
        <h3>Save Changes</h3>
        <p>Do you want to save changes?</p>
        <button onClick={() => removeWith(true)}>Save</button>
        <button onClick={() => removeWith(false)}>Cancel</button>
      </div>
    ),
  }));

  if (confirmed) {
    await save();
    grunfeld.add(() => <div>Saved!</div>);
  } else {
    console.log("Save cancelled");
  }
};

Timed Confirmation#

Automatically cancels if no response within a certain time:

const showTimedConfirm = async () => {
  const confirmPromise = grunfeld.add<boolean>((removeWith) => ({
    element: (
      <div>
        <h3>⏰ Please respond within 10 seconds</h3>
        <p>Will be automatically cancelled after timeout.</p>
        <button onClick={() => removeWith(true)}>Confirm</button>
        <button onClick={() => removeWith(false)}>Cancel</button>
      </div>
    ),
  }));

  // 10 second timeout
  const timeoutId = setTimeout(() => {
    grunfeld.remove();
  }, 10000);

  const result = await confirmPromise;
  clearTimeout(timeoutId);

  if (result === undefined) {
    console.log("Auto-cancelled due to timeout");
  } else if (result) {
    console.log("Confirmed");
  } else {
    console.log("Cancelled");
  }
};