API Reference
Below there is a full list of options and props that notistack supports. Some configurations can only be passed as props to SnackbarProvider
, some can only be passed in the options parameter of enqueueSnackbar
, and finally some can be passed in either places. On this page, the last category is called mutual props.
In the case of a mutual prop, you should pass it to SnackbarProvider
if you want to globally apply the setting to all Snackbars. However, for one-off configurations, you should pass it as an option to enqueueSnackbar
. Have look into the following example:
// all snackbars will automatically disappear after 5 seconds
<SnackbarProvider
autoHideDuration={5000}
/>
// this specific snackbar will disappear after 3 seconds
enqueueSnackbar('I am an exception', {
autoHideDuration: 3000
})
Components
Mapping between variants and a custom component.
children
Most of the time this is your App. every component from this point onward will be able to show snackbars.
Type: React.ReactNode | React.ReactNode[]classes
Override or extend the styles applied to the container component or Snackbars.
dense
Denser margins for snackbars. Recommended to be used on mobile devices.
Type: boolean
Default: falsedomRoot
Valid HTML Node element, used to target `ReactDOM.createPortal`. If you are using this prop, most likely you also want to apply `position: absolute` to SnackbarContainer.
Type: HTMLElementiconVariant
Mapping between variants and an icon component
maxSnack
Maximum snackbars that can be stacked on top of one another.
Type: number
Default: 3- ...and 18 other mutual props
key
Unique identifier to reference a snackbar.
Type: string | number
Default: string random unique stringpersist
Snackbar stays on the screen, unless it is dismissed (programmatically or through user interaction).
Type: boolean
Default: false- ...and 18 other mutual props
These props can be passed in SnackbarProvider
props, as well as options
parameter of enqueueSnackbar
.
SnackbarProps
Properties applied to the Snackbar root element. You'd only want to use this prop to apply html attributes for accessibility or data-* attributes.
TransitionComponent
The component used for the transition. See how you can use a different transition: https://notistack.com/examples/advanced/custom-transition
Default: SlideTransitionProps
Properties applied to Transition component
Type: { addEndListener: func, appear: boolean, children: React.ReactNode, direction: down | left | right | up, enter: boolean, exit: boolean, in: boolean, mountOnEnter: boolean, onEnter: func, onEntered: func, onEntering: func, onExit: func, onExited: func, onExiting: func, style: React.CSSProperties, timeout: number | TransitionDuration, unmountOnExit: boolean }action
Callback used for getting action(s). actions are mostly buttons displayed in Snackbar.
Type: React.ReactNode | funcanchorOrigin
The anchor of the `Snackbar`.
Type: { horizontal: left | center | right, vertical: top | bottom }
Default: { horizontal: left, vertical: bottom }autoHideDuration
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.
Type: number | null
Default: 5000className
Type: stringdisableWindowBlurListener
If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
Type: boolean
Default: falsehideIconVariant
Hides iconVariant if set to `true`.
Type: boolean
Default: falseonClose
Callback fired before snackbar requests to get closed. The `reason` parameter can optionally be used to control the response to `onClose`.
Type: funcpreventDuplicate
Ignores displaying multiple snackbars with the same `message`
Type: boolean
Default: falsestyle
Type: React.CSSPropertiestransitionDuration
The duration for the transition, in milliseconds.
Default: { enter: 225, exit: 195 }variant
Used to easily display different variant of snackbars. When passed to `SnackbarProvider` all snackbars inherit the `variant`, unless you override it in `enqueueSnackbar` options.
Type: default | error | success | warning | info
Default: defaultonEnter
Callback fired before the transition is entering.
onEntered
Callback fired when the transition has entered.
onExit
Callback fired before the transition is exiting.
onExited
Callback fired when the transition has exited.
You can override styles of the components using classes
prop. Here are the valid keys.
Name | Description |
---|---|
root | Styles applied to Snackbar 's root element. |
anchorOriginTopCenter | Styles applied to Snackbar when anchorOrigin={{ vertical: top, horizontal: center }} |
anchorOriginBottomCenter | Styles applied to Snackbar when anchorOrigin={{ vertical: bottom, horizontal: center }} |
anchorOriginTopRight | Styles applied to Snackbar when anchorOrigin={{ vertical: top, horizontal: right }} |
anchorOriginBottomRight | Styles applied to Snackbar when anchorOrigin={{ vertical: bottom, horizontal: right }} |
anchorOriginTopLeft | Styles applied to Snackbar when anchorOrigin={{ vertical: top, horizontal: left }} |
anchorOriginBottomLeft | Styles applied to Snackbar when anchorOrigin={{ vertical: bottom, horizontal: left }} |
containerRoot | Styles applied to SnackbarContainer 's root element. |
containerAnchorOriginTopCenter | Styles applied to SnackbarContainer when anchorOrigin={{ vertical: top, horizontal: center }} |
containerAnchorOriginBottomCenter | Styles applied to SnackbarContainer when anchorOrigin={{ vertical: bottom, horizontal: center }} |
containerAnchorOriginTopRight | Styles applied to SnackbarContainer when anchorOrigin={{ vertical: top, horizontal: right }} |
containerAnchorOriginBottomRight | Styles applied to SnackbarContainer when anchorOrigin={{ vertical: bottom, horizontal: right }} |
containerAnchorOriginTopLeft | Styles applied to SnackbarContainer when anchorOrigin={{ vertical: top, horizontal: left }} |
containerAnchorOriginBottomLeft | Styles applied to SnackbarContainer when anchorOrigin={{ vertical: bottom, horizontal: left }} |