Snackbar
Snackbars provide brief messages about app processes. The component is also known as a toast.
Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.
Usage
Ideally, an app should not render more than one instance of Snackbar.
Snackbar appears on the screen whenever either message or intent prop is changed.
Examples
Here, whenever message prop is changed new Snackbar pops-up on the screen.
Snackbar props
| Name | Type | Default | Description |
|---|---|---|---|
autoHide | boolean | true | Hides Snackbar after `autoHideDuration`. |
autoHideDuration | number | Duration(in ms) after which the Snackbar should autoHide itself. If `autoHide` is false, value will be ignored. | |
disableManualClose | boolean | false | If true, close icon will not be visible. |
hideOnClickAway | boolean | true | If false, snackbar will not close on clicking away. |
intent | 'success' | 'error' | 'warning' | success | Intent of the snackbar. Default autoHideDuration will be different for different intent. |
message | react node | Message to be displayed in Snackbar. | |
onClose | function | Called when Snackbar closes. | |
overrides | custom | Lets you customize all aspects of the component. | |
placement | 'topLeft' | 'top' | 'topRight' | 'bottomLeft' | 'bottom' | 'bottomRight' | bottom | Placement of the Snackbar. |
You can check the implementation of the component for more details.
Snackbar exports
You can import this module like so:
import {Snackbar} from 'spaceweb/snackbar'It exports the following components or utility functions:
- Snackbar