A React hook for creating and managing toast notifications with a global queue, dismiss and update controls.
"use client";
import * as React from "react";
import { useToast } from "@/components/ui/use-toast";
import { Button } from "@/components/ui/button";
import {
Toast,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
} from "@/components/ui/toast";
function Toaster() {
const { toasts } = useToast();
return (
<ToastProvider>
{toasts.map(function ({ id, title, description, action, ...props }) {
return (
<Toast key={id} {...props}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && (
<ToastDescription>{description}</ToastDescription>
)}
</div>
{action}
<ToastClose />
</Toast>
);
})}
<ToastViewport className="!static !top-auto !right-auto !m-0 !w-full !max-w-[360px] !flex-col !gap-2 !p-0" />
</ToastProvider>
);
}
export default function UseToastDemo() {
const { toast } = useToast();
const shown = React.useRef(false);
React.useEffect(() => {
if (shown.current) return;
shown.current = true;
toast({
title: "Scheduled: Catch up",
description: "Friday, February 10, 2023 at 5:57 PM",
});
}, [toast]);
return (
<div className="flex min-h-[220px] flex-col items-center justify-center gap-6">
<Button
variant="outline"
onClick={() =>
toast({
title: "Scheduled: Catch up",
description: "Friday, February 10, 2023 at 5:57 PM",
})
}
>
Show Toast
</Button>
<Toaster />
</div>
);
}
Part of Spectrum UI — browse the full library on 21st.dev.