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
})

• 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 and exist HTML Node element, used to target `ReactDOM.createPortal`
  Type: HTMLElement

• hideIconVariant
  

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

• iconVariant
  

  Little icon that is displayed at left corner of a snackbar.
  Type: { default: React.ReactNode, error: React.ReactNode, info: React.ReactNode, success: React.ReactNode, warning: React.ReactNode }

• maxSnack
  

  Maximum snackbars that can be stacked on top of one another.
  Type: number
  Default: 3

• ...and 19 other mutual props

• key
  

  Unique identifier to reference a snackbar.
  Type: string | number
  Default: random unique string

• persist
  

  Snackbar stays on the screen, unless it is dismissed (programmatically or through user interaction).
  Type: boolean
  Default: false

• ...and 19 other mutual props

These props can be passed in SnackbarProvider props, as well as options parameter of enqueueSnackbar.

• action
  

  Callback used for getting action(s). actions are mostly buttons displayed in Snackbar.
  Type: React.ReactNode | func

• content
  

  Replace the snackbar. Callback used for displaying entirely customized snackbar.
  Type: React.ReactNode | func

• preventDuplicate
  

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

• 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

• TransitionComponent
  

  The component used for the transition. (e.g. Slide, Grow, Zoom, etc.)
  Default: Slide

• TransitionProps
  

  Properties applied to Transition component (e.g. Slide, Grow, Zoom, etc.)

• anchorOrigin
  

  The anchor of the `Snackbar`.
  Type: { horizontal: left | center | right, vertical: top | bottom }
  Default: { horizontal: left, vertical: bottom }

• ariaAttributes
  

  Aria attributes applied to snackbar's content component
  Type: React.AriaAttributes

• 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

• disableWindowBlurListener
  

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

• resumeHideDuration
  

  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.
  Type: number
  Default: autoHideDuration / 2 ms.

• transitionDuration
  

  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 }} ```
  Type: { appear: number, enter: number, exit: number }
  Default: { enter: 225, exit: 195 }

• onClose
  

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

• onEnter
  

  Callback fired before the transition is entering.
  Type: func

• onEntered
  

  Callback fired when the transition has entered.
  Type: func

• onEntering
  

  Callback fired when the transition is entering.
  Type: func

• onExit
  

  Callback fired before the transition is exiting.
  Type: func

• onExited
  

  Callback fired when the transition has exited.
  Type: func

• onExiting
  

  Callback fired when the transition is exiting.
  Type: func

You can override styles of the components using classes prop. Here are the valid keys.