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: false

• domRoot
  

  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: HTMLElement

• iconVariant
  

  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 string

• persist
  

  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: Slide

• TransitionProps
  

  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 | func

• anchorOrigin
  

  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: 5000

• className
  

  
  Type: string

• disableWindowBlurListener
  

  If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
  Type: boolean
  Default: false

• hideIconVariant
  

  Hides iconVariant if set to `true`.
  Type: boolean
  Default: false

• onClose
  

  Callback fired before snackbar requests to get closed. The `reason` parameter can optionally be used to control the response to `onClose`.
  Type: func

• preventDuplicate
  

  Ignores displaying multiple snackbars with the same `message`
  Type: boolean
  Default: false

• style
  

  
  Type: React.CSSProperties

• transitionDuration
  

  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: default

• onEnter
  

  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.