notistack
SnackbarProvider
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | React.ReactNode[] | Most of the time this is your App. every component from this point onward
will be able to show snackbars. | |
classes | Override or extend the styles applied to the container component or Snackbars. | ||
dense | boolean | false | Denser margins for snackbars. Recommended to be used on mobile devices. |
domRoot | HTMLElement | Valid and exist HTML Node element, used to target `ReactDOM.createPortal` | |
hideIconVariant | boolean | false | Hides iconVariant if set to `true`. |
iconVariant | {
default: React.ReactNode,
error: React.ReactNode,
info: React.ReactNode,
success: React.ReactNode,
warning: React.ReactNode
} | Little icon that is displayed at left corner of a snackbar. | |
maxSnack | number | 3 | Maximum snackbars that can be stacked on top of one another. |
...and 19 other props that can be passed as both SnackbarProviderprops or enqueueSnackbaroptions.
enqueueSnackbar options
| Name | Type | Default | Description |
|---|---|---|---|
key | string | number | random unique string | Unique identifier to reference a snackbar. |
persist | boolean | false | Snackbar stays on the screen, unless it is dismissed (programmatically or through user interaction). |
...and 19 other props that can be passed as both SnackbarProviderprops or enqueueSnackbaroptions.
Mutual props
These props can be passed in SnackbarProvider props, as well as options parameter of enqueueSnackbar.
| Name | Type | Default | Description |
|---|---|---|---|
action | React.ReactNode | func | Callback used for getting action(s). actions are mostly buttons displayed in Snackbar. | |
anchorOrigin | {
horizontal: left | center | right,
vertical: top | bottom
} | { horizontal: left, vertical: bottom } | The anchor of the `Snackbar`. |
ariaAttributes | React.AriaAttributes | Aria attributes applied to snackbar's content component | |
autoHideDuration | number | null | 5000 | The number of milliseconds to wait before automatically calling the
`onClose` function. By default snackbars get closed after 5000 milliseconds.
Set autoHideDuration to 'null' if you don't want snackbars to automatically close.
Alternatively pass `persist: true` in the options parameter of enqueueSnackbar. |
content | React.ReactNode | func | Replace the snackbar. Callback used for displaying entirely customized snackbar. | |
disableWindowBlurListener | boolean | false | If `true`, the `autoHideDuration` timer will expire even if the window is not focused. |
onClose | func | Callback fired before snackbar requests to get closed.
The `reason` parameter can optionally be used to control the response to `onClose`. | |
onEnter | func | Callback fired before the transition is entering. | |
onEntered | func | Callback fired when the transition has entered. | |
onEntering | func | Callback fired when the transition is entering. | |
onExit | func | Callback fired before the transition is exiting. | |
onExited | func | Callback fired when the transition has exited. | |
onExiting | func | Callback fired when the transition is exiting. | |
preventDuplicate | boolean | false | Ignores displaying multiple snackbars with the same `message` |
resumeHideDuration | number | autoHideDuration / 2 ms. | The number of milliseconds to wait before dismissing after user interaction.
If `autoHideDuration` property isn't specified, it does nothing.
If `autoHideDuration` property is specified but `resumeHideDuration` isn't,
we use the default value. |
TransitionComponent | Slide | The component used for the transition. (e.g. Slide, Grow, Zoom, etc.) | |
transitionDuration | {
appear: number,
enter: number,
exit: number
} | { enter: 225, exit: 195 } | The duration for the transition, in milliseconds.
You may specify the duration with an object in the following shape:
```js
transitionDuration={{ enter: 300, exit: 500 }}
``` |
TransitionProps | Properties applied to Transition component (e.g. Slide, Grow, Zoom, etc.) | ||
variant | default | error | success | warning | info | default | Used to easily display different variant of snackbars. When passed to `SnackbarProvider`
all snackbars inherit the `variant`, unless you override it in `enqueueSnackbar` options. |
Overriding styles
You can override styles of the components using classes prop. Here are the valid keys.
| Name | Description |
|---|---|
| variantSuccess | Styles applied to Snackbarwhen { variant: success } |
| variantError | Styles applied to Snackbarwhen { variant: error } |
| variantWarning | Styles applied to Snackbarwhen { variant: warning } |
| variantInfo | Styles applied to Snackbarwhen { variant: info } |
| root | Styles applied to Snackbar's root element. |
| anchorOriginTopCenter | Styles applied to Snackbarwhen anchorOrigin={{ vertical: top, horizontal: center }} |
| anchorOriginBottomCenter | Styles applied to Snackbarwhen anchorOrigin={{ vertical: bottom, horizontal: center }} |
| anchorOriginTopRight | Styles applied to Snackbarwhen anchorOrigin={{ vertical: top, horizontal: right }} |
| anchorOriginBottomRight | Styles applied to Snackbarwhen anchorOrigin={{ vertical: bottom, horizontal: right }} |
| anchorOriginTopLeft | Styles applied to Snackbarwhen anchorOrigin={{ vertical: top, horizontal: left }} |
| anchorOriginBottomLeft | Styles applied to Snackbarwhen anchorOrigin={{ vertical: bottom, horizontal: left }} |
| containerRoot | Styles applied to SnackbarContainer's root element. |
| containerAnchorOriginTopCenter | Styles applied to SnackbarContainerwhen anchorOrigin={{ vertical: top, horizontal: center }} |
| containerAnchorOriginBottomCenter | Styles applied to SnackbarContainerwhen anchorOrigin={{ vertical: bottom, horizontal: center }} |
| containerAnchorOriginTopRight | Styles applied to SnackbarContainerwhen anchorOrigin={{ vertical: top, horizontal: right }} |
| containerAnchorOriginBottomRight | Styles applied to SnackbarContainerwhen anchorOrigin={{ vertical: bottom, horizontal: right }} |
| containerAnchorOriginTopLeft | Styles applied to SnackbarContainerwhen anchorOrigin={{ vertical: top, horizontal: left }} |
| containerAnchorOriginBottomLeft | Styles applied to SnackbarContainerwhen anchorOrigin={{ vertical: bottom, horizontal: left }} |
Part of this documentation was taken from material-ui website.