Komponen toast sering digunakan untuk memberikan notifikasi. Berikut cara install nya :
pnpm dlx shadcn@latest add toastCara menggunakannya, kita akan modifikasi file app/page.tsx sebelumnya dengan menambahkan :
import { useToast } from "@/hooks/use-toast"kemudian ini :
const { toast } = useToast();dan mengubah Komponen Buttonnya menjadi
<Button
onClick={() => {
toast({
title: "Coba Toast",
description:
"Senin, 30 Desember 2024 pukul 7:14 AM",
});
}}
>
Show Toast
</Button>Lengkapnya adalah sebegai berikut :
import { Button } from "@/components/ui/button";
import { useToast } from "@/hooks/use-toast";
export default function Page() {
const { toast } = useToast();
return (
<div className="flex min-h-svh items-center justify-center">
<div className="flex flex-col items-center gap-2">
<h1 className="text-2xl font-bold">Hello World</h1>
<div className="text-sm">
Get started by editing{" "}
<code className="rounded bg-black/[.05] px-1 py-0.5 font-semibold dark:bg-white/[.06]">
app/page.tsx
</code>
</div>
<Button
onClick={() => {
toast({
title: "Coba Toast",
description:
"Senin, 30 Desember 2024 pukul 7:14 AM",
});
}}
>
Show Toast
</Button>
</div>
</div>
);
}jalankan aplikasi dengan menggunakan perintah :
pnpm devkemudian akses http://localhost:3000
Hasilnya akan muncul error seperti berikut :
[ Server ] Error: Attempted to call useToast() from the server but useToast is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.Hal ini dikarenakan komponen toast berjalan disisi client. kita harus menambahkan di baris paling atas dengan perintah :
"use client";sehingga tampilannya adalah sebagai berikut :
Tekan tombol Show Toast, harusnya akan muncul toast di kanan bawah. Jika masih tidak muncul, artinya masih ada proses yang tertinggal, yaitu kita harus menambahkan beberapa baris pada file layout.tsx. Tambahkan baris berikut :
import { Toaster } from "@/components/ui/toaster"Kemudian panggil komponen <Toaster /> pada body, sehingga lengkap nya adalah sebagai berikut
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { Toaster } from "@/components/ui/toaster";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Kumpulan Belajar Next.js 15",
description: "Kumpulan Belajar Next.js 15",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<Toaster />
{children}
</body>
</html>
);
}
Modifikasi Toast
Untuk memodifikasi Toast, kita bisa memodifikasi file : src/components/ui/toast.tsx
Menambahkan variant
Cari baris berikut :
const toastVariants = cva(
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
{
variants: {
variant: {
default: "border bg-background text-foreground",
destructive:
"destructive group border-destructive bg-destructive text-destructive-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)Terlihat hanya ada 2 buah variant : Default dan Destructive. Jika ingin menambah variant success misalnya, tinggal tambahkan sebagai berikut :
variant: {
default: "border bg-background text-foreground",
success: "bg-green-500 border-white text-white ",
destructive:
"destructive group border-destructive bg-destructive text-destructive-foreground",
},Kemudian kita modifikasi file page.tsx sebelumnya menjadi berikut :
toast({
variant: "success",
title: "Coba Variant Success",
description:
"Senin, 30 Desember 2024 pukul 7:14 AM",
});Maka akan muncul sebagai berikut :
Mengubah Posisi Munculnya Toast
Skenario kali ini , kita akan munculkan toast pada Kanan Atas. Untuk itu kita cari dulu bari program berikut pada file : src/components/ui/toast.tsx
<ToastPrimitives.Viewport
ref={ref}
className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
className
)}
{...props}
/>Biasanya saya saat memodifikasi komponen, tetap mempertahankan baris aslinya dengan memberikan comment, lalu tambahkan hasil modifikasinya sehingga hasilnya sebagai berikut :
// className={cn(
// "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
// className
// )}
// Menghilangkan sm:top-auto sm:bottom-0
className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:right-0 sm:flex-col md:max-w-[420px]",
className
)}Silahkan jalankan toast
Mengubah Durasi
Defaultnya adalah 5 detik, jika ingin diubah menjadi 2 detik misalnya, silahkan tambahkan baris berikut (satuannya adalah milisecond)
toast({
duration: 2000,
variant: "success",
title: "Coba Variant Success",
description:
"Senin, 30 Desember 2024 pukul 7:14 AM",
});