# 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`:
```tsx
import { ToastProvider } from "@/components/ui/toast";
export default function RootLayout({ children }) {
return (
{children}
);
}
```
### 2. Gunakan Hook useToast
```tsx
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 (
);
}
```
### 3. Custom Toast
```tsx
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 ;
}
```
## API Reference
### useToast Hook
```tsx
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
```tsx
showToast({
type: "success" | "error" | "warning" | "info",
title: string,
description: string,
duration: number, // dalam milliseconds, default: 5000
});
```
### showSuccess/showError/showWarning/showInfo Parameters
```tsx
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 theme
- `error`: Red theme (destructive)
- `warning`: Yellow theme
- `info`: Blue theme
- `default`: Default theme
## Contoh Integrasi dengan Form
```tsx
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 ;
}
```