Browse docs
Browse docs
Imperative toast notification system. Add SnackbarProvider once at your app root, then call useSnackbar() anywhere to show success, error, warning, or info messages.
function MyComponent() {
const snackbar = useSnackbar();
return (
<Button onClick={() => snackbar.success('Saved!')}>Save</Button>
);
}// 1. Add the provider at app root (once)
import { SnackbarProvider } from '@dashforge/ui';
function App() {
return (
<SnackbarProvider>
<Router />
</SnackbarProvider>
);
}
// 2. Call useSnackbar() in any component
import { useSnackbar } from '@dashforge/ui';
function SaveButton() {
const snackbar = useSnackbar();
const handleSave = async () => {
try {
await saveData();
snackbar.success('Saved successfully!');
} catch {
snackbar.error('Failed to save. Please try again.');
}
};
return <Button onClick={handleSave}>Save</Button>;
}useSnackbar() methods| Method | Signature | Description |
|---|---|---|
success | (message: string, options?) => void | Shows a green success toast. |
error | (message: string, options?) => void | Shows a red error toast. |
warning | (message: string, options?) => void | Shows an orange warning toast. |
info | (message: string, options?) => void | Shows a blue info toast. |
| Option | Type | Default | Description |
|---|---|---|---|
duration | number | 4000 | Auto-dismiss duration in milliseconds. |
action | ReactNode | — | Custom action button rendered inside the toast. |
duration: null to prevent auto-dismiss and require manual closing.SnackbarProvider is separate from MUI's SnackbarProvider (notistack) — import only from @dashforge/ui.