165 lines
3.6 KiB
Markdown
165 lines
3.6 KiB
Markdown
# 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 (
|
|
<html>
|
|
<body>
|
|
<ToastProvider>{children}</ToastProvider>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
```
|
|
|
|
### 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 (
|
|
<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
|
|
|
|
```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 <button onClick={handleCustomToast}>Show Custom Toast</button>;
|
|
}
|
|
```
|
|
|
|
## 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 <form onSubmit={handleSubmit}>{/* form fields */}</form>;
|
|
}
|
|
```
|