Sonner/sonner-promise-

PreviousNext

A sonner/sonner-promise- example

Docs
shadcnblocksblock

Preview

Loading preview…
code/example/sonner/sonner-promise-2.tsx
"use client";

import { toast } from "sonner";

import { Button } from "@/components/ui/button";

export const title = "Promise Toast with Data";

const Example = () => {
  const handleClick = () => {
    const promise = new Promise<{ name: string }>((resolve) => {
      setTimeout(() => resolve({ name: "John Doe" }), 2000);
    });

    toast.promise(promise, {
      loading: "Creating user...",
      success: (data) => `${data.name} has been added`,
      error: "Failed to create user",
    });
  };

  return (
    <Button onClick={handleClick} variant="outline">
      Create User
    </Button>
  );
};

export default Example;

Installation

npx shadcn@latest add @shadcnblocks/sonner-sonner-promise-2

Usage

import { SonnerSonnerPromise2 } from "@/components/sonner-sonner-promise-2"
<SonnerSonnerPromise2 />