notistack

SnackbarProvider
NameTypeDefaultDescription
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 18 other props that can be passed as both SnackbarProviderprops or enqueueSnackbaroptions.
enqueueSnackbar options
NameTypeDefaultDescription
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 18 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.
NameTypeDefaultDescription
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`.
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
number | { appear: number, enter: number, exit: number }
{ enter: 225, exit: 195 }
The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object in the following shape: ```js timeout={500} ``` or individually: ```js timeout={{ 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.
NameDescription
variantSuccessStyles applied to Snackbarwhen { variant: success }
variantErrorStyles applied to Snackbarwhen { variant: error }
variantWarningStyles applied to Snackbarwhen { variant: warning }
variantInfoStyles applied to Snackbarwhen { variant: info }
rootStyles applied to Snackbar's root element.
anchorOriginTopCenterStyles applied to Snackbarwhen
anchorOrigin={{ vertical: top, horizontal: center }}
anchorOriginBottomCenterStyles applied to Snackbarwhen
anchorOrigin={{ vertical: bottom, horizontal: center }}
anchorOriginTopRightStyles applied to Snackbarwhen
anchorOrigin={{ vertical: top, horizontal: right }}
anchorOriginBottomRightStyles applied to Snackbarwhen
anchorOrigin={{ vertical: bottom, horizontal: right }}
anchorOriginTopLeftStyles applied to Snackbarwhen
anchorOrigin={{ vertical: top, horizontal: left }}
anchorOriginBottomLeftStyles applied to Snackbarwhen
anchorOrigin={{ vertical: bottom, horizontal: left }}
containerRootStyles applied to SnackbarContainer's root element.
containerAnchorOriginTopCenterStyles applied to SnackbarContainerwhen
anchorOrigin={{ vertical: top, horizontal: center }}
containerAnchorOriginBottomCenterStyles applied to SnackbarContainerwhen
anchorOrigin={{ vertical: bottom, horizontal: center }}
containerAnchorOriginTopRightStyles applied to SnackbarContainerwhen
anchorOrigin={{ vertical: top, horizontal: right }}
containerAnchorOriginBottomRightStyles applied to SnackbarContainerwhen
anchorOrigin={{ vertical: bottom, horizontal: right }}
containerAnchorOriginTopLeftStyles applied to SnackbarContainerwhen
anchorOrigin={{ vertical: top, horizontal: left }}
containerAnchorOriginBottomLeftStyles applied to SnackbarContainerwhen
anchorOrigin={{ vertical: bottom, horizontal: left }}
Part of this documentation was taken from material-ui website.