Notistack npm library documentation website logo
npm downloads

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.

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