API Reference
ToasterProvider Props​
Provider Configuration
Wrap your app with ToasterProvider at the root level to ensure toast functionality is available throughout your application. This enables you to use the useToast hook in any nested component.
Memory Management
Avoid creating new function references for onToastDismiss prop on each render. Use useCallback for event handlers to prevent unnecessary re-renders.
| Prop | Type | Default | Description |
|---|---|---|---|
| position | number | 80 | Position where toasts will appear from top |
| duration | number | 3000 | Default duration (in ms) for toasts to remain visible |
| offset | number | 16 | Distance from the edge of the screen |
| backgroundColor | string | "#333333" | Default background color for toasts |
| textColor | string | "#FFFFFF" | Default text color for toasts |
| successColor | string | "#4CAF50" | Background color for success toasts |
| errorColor | string | "#F44336" | Background color for error toasts |
| infoColor | string | "#2196F3" | Background color for info toasts |
| warningColor | string | "#FF9800" | Background color for warning toasts |
| animationDuration | number | 300 | Duration of show/hide animations |
| onToastDismiss | (id: string) => void | - | Callback when a toast is dismissed |
| children | ReactNode | - | The content to be wrapped by ToasterProvider |
useToast Hook​
Performance Optimization
Use the useToast hook at the component level where you need toast functionality. Destructure only the methods you need to minimize unnecessary re-renders.
State Management
Do not call show methods during render. Use event handlers or effects to trigger toasts.
The useToast hook provides methods to display and control toasts. Here's a detailed reference of the returned object:
| Method/Property | Type | Description |
|---|---|---|
| showToast | (message: string, options?: ToastOptions) => string | Shows a basic toast with default styling |
| hideToast | (id: string) => void | Manually hides a specific toast by its ID |
ToastOptions​
| Option | Type | Description |
|---|---|---|
| duration | number | Time in ms the toast should remain visible |
| backgroundColor | string | Custom background color for this toast |
| textColor | string | Custom text color for this toast |