Toast Component
Lightweight, non-intrusive notifications that appear briefly and auto-dismiss. Perfect for feedback messages.
Live Preview
Usage
1. Setup Provider
Wrap your application with ToastProvider and add ToastContainer:
import { ToastProvider, ToastContainer }
from '@featherstudio/react-daisyui-kit';
export default function RootLayout({ children }) {
return (
<html>
<body>
<ToastProvider>
{children}
<ToastContainer />
</ToastProvider>
</body>
</html>
);
}2. Basic Usage
import { toast } from '@featherstudio/react-daisyui-kit';
// Success toast
toast.success('Operation completed successfully!');
// Error toast
toast.error('Something went wrong');
// Warning toast
toast.warning('Please save your changes');
// Info toast
toast.info('New update available');3. Advanced Options
// Custom duration (milliseconds)
toast.success('Saved!', 2000);
// Custom toast config
toast.show({
message: 'Custom toast',
type: 'info',
duration: 3000,
position: 'top-center',
onClose: () => console.log('Toast closed')
});Features
Auto-Dismiss
Automatically disappears after configurable timeout.
Multiple Types
Success, error, warning, and info variants.
Non-Intrusive
Appears in corner without blocking content.
Customizable Position
Top/bottom and left/right/center positioning.
Props
Toast Methods
| Method | Parameters | Description |
|---|---|---|
| toast.success() | message, duration? | Show success toast |
| toast.error() | message, duration? | Show error toast |
| toast.warning() | message, duration? | Show warning toast |
| toast.info() | message, duration? | Show info toast |
| toast.show() | config | Show custom toast |
Toast Config
| Property | Type | Default | Description |
|---|---|---|---|
| message | string | ReactNode | - | Toast content (required) |
| type | 'success' | 'error' | 'warning' | 'info' | 'info' | Toast type |
| duration | number | 4000 | Duration in milliseconds |
| position | string | 'top-right' | Toast position |
| onClose | () => void | - | Close callback |