The Snack component provides a simple, customizable snack notification that can be used to display success, error, or other messages. It automatically fades out after a specified duration and can also be manually dismissed using a callback.
npm i @anakin-gbit/snack<Snack message="Operation successful!" />
<Snack message="An error occurred." type="error" />| Prop | Type | Default | Description |
|---|---|---|---|
message | string | - | The message to display in the snack. |
type | 'success' | 'error' | 'success' | The type of the snack, determining its color. Defaults to 'success'. |
duration | number | 3000 | The duration (in milliseconds) for which the snack will be displayed before automatically disappearing. |
onClose | function | - | An optional callback function that will be called when the snack closes. |
<Snack message="Operation successful!" />
<Snack message="An error occurred." type="error" />The snack component is styled using the following CSS classes:
.snackWrapper: The wrapper that controls the height transition when showing or hiding the snack..snack: The actual snack container. It has a default background color for success messages..snack.success: Specific styling for success messages..snack.error: Specific styling for error messages.