3.6 KiB
3.6 KiB
Toast Notification Component
Komponen toast notification yang dinamis menggunakan Lucide React icons.
Fitur
- ✅ 4 jenis toast: Success, Error, Warning, Info
- ✅ Auto-dismiss setelah durasi tertentu
- ✅ Manual close dengan tombol X
- ✅ Animasi smooth
- ✅ Responsive design
- ✅ TypeScript support
- ✅ Context-based state management
Cara Penggunaan
1. Setup Provider
Bungkus aplikasi Anda dengan ToastProvider:
import { ToastProvider } from "@/components/ui/toast";
export default function RootLayout({ children }) {
return (
<html>
<body>
<ToastProvider>{children}</ToastProvider>
</body>
</html>
);
}
2. Gunakan Hook useToast
import { useToast } from "@/components/ui/toast";
export default function MyComponent() {
const { showSuccess, showError, showWarning, showInfo } = useToast();
const handleSuccess = () => {
showSuccess("Berhasil!", "Data telah disimpan dengan sukses.");
};
const handleError = () => {
showError("Gagal!", "Terjadi kesalahan saat menyimpan data.");
};
const handleWarning = () => {
showWarning("Peringatan!", "Data akan dihapus secara permanen.");
};
const handleInfo = () => {
showInfo("Informasi", "Sistem sedang dalam maintenance.");
};
return (
<div>
<button onClick={handleSuccess}>Show Success</button>
<button onClick={handleError}>Show Error</button>
<button onClick={handleWarning}>Show Warning</button>
<button onClick={handleInfo}>Show Info</button>
</div>
);
}
3. Custom Toast
import { useToast } from "@/components/ui/toast";
export default function MyComponent() {
const { showToast } = useToast();
const handleCustomToast = () => {
showToast({
type: "success",
title: "Custom Toast",
description: "Ini adalah toast kustom dengan durasi 10 detik",
duration: 10000, // 10 detik
});
};
return <button onClick={handleCustomToast}>Show Custom Toast</button>;
}
API Reference
useToast Hook
const {
showToast, // Fungsi umum untuk menampilkan toast
showSuccess, // Menampilkan toast success
showError, // Menampilkan toast error
showWarning, // Menampilkan toast warning
showInfo, // Menampilkan toast info
} = useToast();
showToast Parameters
showToast({
type: "success" | "error" | "warning" | "info",
title: string,
description: string,
duration: number, // dalam milliseconds, default: 5000
});
showSuccess/showError/showWarning/showInfo Parameters
showSuccess(title: string, description?: string);
showError(title: string, description?: string);
showWarning(title: string, description?: string);
showInfo(title: string, description?: string);
Styling
Toast menggunakan Tailwind CSS dengan variant yang dapat dikustomisasi:
success: Green themeerror: Red theme (destructive)warning: Yellow themeinfo: Blue themedefault: Default theme
Contoh Integrasi dengan Form
import { useToast } from "@/components/ui/toast";
export default function MyForm() {
const { showSuccess, showError } = useToast();
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await fetch("/api/data", {
method: "POST",
body: JSON.stringify(formData),
});
if (response.ok) {
showSuccess("Berhasil!", "Data telah disimpan.");
} else {
showError("Gagal!", "Terjadi kesalahan saat menyimpan data.");
}
} catch (error) {
showError("Error!", "Koneksi terputus.");
}
};
return <form onSubmit={handleSubmit}>{/* form fields */}</form>;
}