Overview
The Snackbar component provides a way to display brief messages at the bottom of the screen to provide feedback or information to the user. It can be used to show notifications, alerts, or confirmations in a non-intrusive way.
Variants
The snackbar component supports several variants to suit different use cases:
- Basic Snackbar: Displays a simple message to the user.
- Snackbar with Action Button: Includes an action button for immediate user interaction.
- Snackbar with Close Button: Allows users to manually close the snackbar.
Configuration
ThemeProvider Integration
The snackbar system is integrated into the ThemeProvider, so you don't need any additional providers. Just make sure you have root={true} set on your ThemeProvider at the application root:
Configuring Snackbar System
You can configure the snackbar system with additional props on the ThemeProvider:
useSnackbar Hook
The useSnackbar hook provides access to the snackbar system from anywhere in your application:
Manual Snackbar Component
While the context-based approach is recommended, you can still use the Snackbar component directly for advanced use cases where you need full control:
API Reference
Snackbar
A notification component that appears temporarily to provide feedback or information.
Props
| Name | Type | Default | Description |
|---|---|---|---|
message | string | Required | The message to display in the snackbar |
open | boolean | false | Whether the snackbar is visible |
autoHideDuration | number | 4000 | Time in milliseconds before auto-hiding. Set to 0 to disable auto-hide |
actionName | string | undefined | Text for the action button |
onActionClick | () => void | undefined | Callback fired when the action button is clicked |
onClose | () => void | undefined | Callback fired when the snackbar is closed |
closeable | boolean | false | Whether to show a close button |
Inherited Props
The Snackbar component accepts all standard HTML div element props.
useSnackbar Hook
Hook for accessing the snackbar system from within components.
Returns
| Name | Type | Description |
|---|---|---|
showSnackbar | (options: SnackbarOptions) => void | Function to show a new snackbar |
hideSnackbar | (id: string) => void | Function to hide a specific snackbar by ID |
hideAllSnackbars | () => void | Function to hide all snackbars |
SnackbarOptions
| Name | Type | Default | Description |
|---|---|---|---|
message | string | Required | The message to display |
actionName | string | undefined | Text for the action button |
onActionClick | () => void | undefined | Action button click handler |
closeable | boolean | false | Whether to show close button |
autoHideDuration | number | 4000 | Auto-hide duration in milliseconds |