Snackbar
Fire-and-forget notifications with zero boilerplate. Show success, error, and info messages instantly with automatic queue management and dismiss.
Imperative Pattern
Quick Start
Set up the provider and start showing notifications
Quick Start
2 Steps
Step 1: Wrap your app with the provider
import { SnackbarProvider } from '@dashforge/ui';
<SnackbarProvider>
<App />
</SnackbarProvider>Step 2: Use the hook to show notifications
import { useSnackbar } from '@dashforge/ui';
const { success } = useSnackbar();
success('Saved successfully');ℹ️
The snackbar is rendered automatically by the provider. No component needs to be added to your UI.
Examples
Interactive demos showing common usage patterns
Basic Notification
Fire and forget
const { success } = useSnackbar();
success('Saved successfully');Notification Variants
Use semantic variants for different message types
const { success, error, warning, info } = useSnackbar();
success('Operation completed');
error('An error occurred');
warning('Please review your input');
info('New updates available');Async Flow
Show notifications after async operations
const { success, error } = useSnackbar();
try {
await api.saveData(data);
success('Data saved');
} catch (err) {
error('Failed to save');
}Manual Control
Control notification lifecycle manually
Set autoHideDuration to null to create persistent notifications that require manual dismissal.
const { enqueue, close, closeAll } = useSnackbar();
// Persistent notification
const id = enqueue('Message', {
autoHideDuration: null
});
close(id); // Close specific
closeAll(); // Close allReal-World Scenarios
Common use cases and implementation patterns
API Success and Error Handling
Show feedback after API operations
Example pattern below
const { success, error } = useSnackbar();
try {
await api.updateUser(userId, data);
success('User updated');
queryClient.invalidateQueries(['users']);
} catch (err) {
error('Failed to update user');
}ConfirmDialog + Snackbar Integration
Confirm action, then show feedback
Example pattern below
const confirm = useConfirm();
const { success } = useSnackbar();
const handleDelete = async () => {
const result = await confirm({
title: 'Delete User?',
description: 'This action cannot be undone.',
});
if (result.status === 'confirmed') {
await deleteUser();
success('User deleted');
}
};Form Submit Feedback
Show success after form submission
Example pattern below
const { success } = useSnackbar();
const onSubmit = async (data: FormData) => {
await api.createProject(data);
success('Project created');
navigate('/projects');
};Undo Pattern
Allow undo with action button
Example pattern below
const { enqueue } = useSnackbar();
const handleDelete = (itemId: string) => {
const backup = items.find(i => i.id === itemId);
setItems(items.filter(i => i.id !== itemId));
enqueue('Item deleted', {
variant: 'info',
autoHideDuration: 7000,
action: (
<Button onClick={() => handleUndo(backup)}>
Undo
</Button>
),
});
setTimeout(() => api.deleteItem(itemId), 7000);
};API Reference
Complete API documentation
SnackbarProvider
Enables useSnackbar() hook. Wrap your app root or subtree.
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | App content to wrap |
useSnackbar()
Returns the snackbar API. Must be called inside SnackbarProvider.
Returns
SnackbarAPI
Methods to enqueue, close, and manage notifications.
SnackbarAPI
| Method | Signature | Description |
|---|---|---|
| enqueue | (message, options?) => string | Add notification to queue, returns unique ID |
| success | (message, options?) => string | Enqueue success variant notification |
| error | (message, options?) => string | Enqueue error variant notification |
| warning | (message, options?) => string | Enqueue warning variant notification |
| info | (message, options?) => string | Enqueue info variant notification |
| close | (id: string) => void | Close specific notification by ID |
| closeAll | () => void | Close all visible notifications |
SnackbarOptions
| Option | Type | Default | Description |
|---|---|---|---|
| variant | 'success' | 'error' | 'warning' | 'info' | 'default' | 'default' | Visual variant for the notification |
| autoHideDuration | number | null | 5000 | Auto-hide duration in ms. Set to null for persistent notification |
| action | ReactNode | - | Optional action element (e.g., undo button) |
| preventDismiss | boolean | false | Prevent dismissal by clicking close button |
Implementation Notes
Important details about behavior and best practices
1
Maximum Visible Snackbars
Maximum of 3 visible snackbars. Additional notifications are queued and displayed as others dismiss.
2
FIFO Queue Behavior
Notifications display in first-in, first-out order. The queue processes automatically as snackbars dismiss.
3
Auto-Dismiss Behavior
Default auto-dismiss is 5000ms (5 seconds). Timer starts when visible, not when enqueued. Set autoHideDuration to null for persistent notifications.
4
closeAll() Semantics
closeAll() dismisses all visible snackbars and clears the queue. Useful for navigation or logout events.
5
When NOT to Use Snackbar
Snackbar is for brief, non-critical notifications. For user confirmation, use ConfirmDialog. For critical errors requiring acknowledgment, use Dialog. For complex layouts or forms, use Dialog or custom components. Never use snackbars for blocking interactions.
6
Provider Scope
Wrap SnackbarProvider at app root or highest level where notifications are needed. useSnackbar() must be called within provider scope. Snackbars render at provider level.
7
Action Button Best Practices
Keep actions simple (e.g., "Undo", "View"). For undo patterns, use 7-10 second autoHideDuration. Always handle auto-dismiss before user clicks.