Function useModal

Example

function DeleteButton() {
  const { showModal, isSupported, isOpen } = useModal();

  const handleDelete = async () => {
    const result = await showModal({
      title: "Confirm Delete",
      body: "Are you sure you want to delete this item?",
      buttons: [
        { label: "Cancel", variant: "secondary", value: "cancel" },
        { label: "Delete", variant: "destructive", value: "delete" },
      ],
    });

    if (result?.action === "delete") {
      // Perform delete
    }
  };

  if (!isSupported) {
    return <button onClick={() => window.confirm("Delete?")}>Delete</button>;
  }

  return (
    <button onClick={handleDelete} disabled={isOpen}>
      Delete
    </button>
  );
}

// Input modal example
function RenameButton() {
  const { showModal } = useModal();

  const handleRename = async () => {
    const result = await showModal({
      title: "Rename Item",
      input: {
        type: "text",
        placeholder: "Enter new name",
        defaultValue: "Current Name",
      },
      buttons: [
        { label: "Cancel", variant: "secondary", value: "cancel" },
        { label: "Rename", variant: "primary", value: "rename" },
      ],
    });

    if (result?.action === "rename" && result.inputValue) {
      console.log("New name:", result.inputValue);
    }
  };

  return <button onClick={handleRename}>Rename</button>;
}
Copy