• Version 3.0.1
  • Published
  • 459 kB
  • 2 dependencies
  • MIT license


npm i notistack
yarn add notistack
pnpm add notistack


Highly customizable notification snackbars (toasts) that can be stacked on top of each other



variable closeSnackbar

const closeSnackbar: (key?: SnackbarKey) => void;

    variable enqueueSnackbar

    const enqueueSnackbar: EnqueueSnackbar;

      variable Transition

      const Transition: React.JSXElementConstructor<TransitionComponentProps>;


        function MaterialDesignContent

        MaterialDesignContent: (
        props: CustomContentProps & React.RefAttributes<HTMLDivElement>
        ) => React.ReactElement<any, any>;

          function SnackbarContent

          SnackbarContent: (
          props: SnackbarContentProps & React.RefAttributes<HTMLDivElement>
          ) => React.ReactElement<any, any>;

            function useSnackbar

            useSnackbar: () => ProviderContext;


              class SnackbarProvider

              class SnackbarProvider extends React.Component<SnackbarProviderProps> {}

                property closeSnackbar

                closeSnackbar: (key?: SnackbarKey) => void;

                  property enqueueSnackbar

                  enqueueSnackbar: EnqueueSnackbar;

                    method render

                    render: () => React.ReactNode;


                      interface EnqueueSnackbar

                      interface EnqueueSnackbar {}

                        call signature

                        <V extends VariantType>(
                        options: OptionsWithExtraProps<V> & { message?: SnackbarMessage }
                        ): SnackbarKey;

                          call signature

                          <V extends VariantType>(
                          message: SnackbarMessage,
                          options?: OptionsWithExtraProps<V>
                          ): SnackbarKey;

                            interface InternalSnack

                            interface InternalSnack
                            extends RequiredBy<
                            Omit<OptionsObject, 'key' | 'preventDuplicate'>,
                            InternalSnackAttributes {}
                            • Properties of a snackbar internal to notistack implementation. Not to be used by outside world. If you find yourself using this, you're probably looking for CustomContentProps type.

                            property iconVariant

                            iconVariant: Record<string, React.ReactNode>;

                              property id

                              id: SnackbarKey;

                                property message

                                message?: SnackbarMessage;

                                  interface InternalSnackAttributes

                                  interface InternalSnackAttributes {}
                                  • Properties of the internal snack which should not be exposed to outside world

                                  property entered

                                  entered: boolean;

                                    property open

                                    open: boolean;

                                      property requestClose

                                      requestClose: boolean;

                                        interface OptionsObject

                                        interface OptionsObject<V extends VariantType = VariantType>
                                        extends SharedProps<V> {}
                                        • Enqueue

                                        property key

                                        key?: SnackbarKey;
                                        • Unique identifier to reference a snackbar. string random unique string

                                        property persist

                                        persist?: boolean;
                                        • Snackbar stays on the screen, unless it is dismissed (programmatically or through user interaction). false

                                        interface ProviderContext

                                        interface ProviderContext {}

                                          property closeSnackbar

                                          closeSnackbar: (key?: SnackbarKey) => void;

                                            property enqueueSnackbar

                                            enqueueSnackbar: EnqueueSnackbar;

                                              interface SharedProps

                                              interface SharedProps<V extends VariantType = VariantType>
                                              extends Partial<TransitionHandlerProps> {}
                                              • Shared

                                              property action

                                              action?: SnackbarAction;
                                              • Callback used for getting action(s). actions are mostly buttons displayed in Snackbar.

                                                Parameter key

                                                key of a snackbar

                                              property anchorOrigin

                                              anchorOrigin?: SnackbarOrigin;
                                              • The anchor of the Snackbar. { horizontal: left, vertical: bottom }

                                              property autoHideDuration

                                              autoHideDuration?: number | null;
                                              • 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. 5000

                                              property className

                                              className?: string;

                                                property content

                                                content?: SnackbarContentCallback;
                                                • Replace the snackbar. Callback used for displaying entirely customized snackbars.

                                                  Parameter key

                                                  key of a snackbar


                                                  - Will be removed in future releases. You should use Components prop of SnackbarProvider to display a custom snackbar. This is to have more control over custom snackbars.

                                                property disableWindowBlurListener

                                                disableWindowBlurListener?: boolean;
                                                • If true, the autoHideDuration timer will expire even if the window is not focused. false

                                                property hideIconVariant

                                                hideIconVariant?: boolean;
                                                • Hides iconVariant if set to true. false

                                                property onClose

                                                onClose?: (
                                                event: React.SyntheticEvent<any> | null,
                                                reason: CloseReason,
                                                key?: SnackbarKey
                                                ) => void;
                                                • Callback fired before snackbar requests to get closed. The reason parameter can optionally be used to control the response to onClose.

                                                  Parameter event

                                                  The event source of the callback

                                                  Parameter reason

                                                  Can be:"timeout" (autoHideDuration expired) or: "maxsnack" (snackbar was closed because maxSnack has reached) or: "instructed" (snackbar was closed programmatically)

                                                  Parameter key

                                                  key of a Snackbar. key will be undefined if closeSnackbar is called with no key (user requested all the snackbars to be closed)

                                                property preventDuplicate

                                                preventDuplicate?: boolean;
                                                • Ignores displaying multiple snackbars with the same message false

                                                property SnackbarProps

                                                SnackbarProps?: React.HTMLAttributes<HTMLDivElement>;
                                                • Properties applied to the Snackbar root element. You'd only want to use this prop to apply html attributes for accessibility or data-* attributes.

                                                property style

                                                style?: React.CSSProperties;

                                                  property TransitionComponent

                                                  TransitionComponent?: React.JSXElementConstructor<
                                                  TransitionProps & { children: React.ReactElement<any, any> }
                                                  • The component used for the transition. See how you can use a different transition: Slide

                                                  property transitionDuration

                                                  transitionDuration?: TransitionProps['timeout'];
                                                  • The duration for the transition, in milliseconds.

                                                    You may specify a single timeout for both enter and exit transitions:


                                                    or individually:

                                                    timeout={{ enter: 300, exit: 500 }}

                                                    { enter: 225, exit: 195 }

                                                  property TransitionProps

                                                  TransitionProps?: Partial<TransitionProps>;
                                                  • Properties applied to Transition component

                                                  property variant

                                                  variant?: V;
                                                  • Used to easily display different variant of snackbars. When passed to SnackbarProvider all snackbars inherit the variant, unless you override it in enqueueSnackbar options. default

                                                  interface SnackbarOrigin

                                                  interface SnackbarOrigin {}

                                                    property horizontal

                                                    horizontal: 'left' | 'center' | 'right';

                                                      property vertical

                                                      vertical: 'top' | 'bottom';

                                                        interface SnackbarProviderProps

                                                        interface SnackbarProviderProps extends SharedProps {}
                                                        • Provider

                                                        property children

                                                        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.

                                                        property classes

                                                        classes?: Partial<ClassNameMap<CombinedClassKey>>;
                                                        • Override or extend the styles applied to the container component or Snackbars.

                                                        property Components

                                                        Components?: {
                                                        [variant in VariantType]?: React.JSXElementConstructor<any>;
                                                        • Mapping between variants and a custom component.

                                                        property dense

                                                        dense?: boolean;
                                                        • Denser margins for snackbars. Recommended to be used on mobile devices. false

                                                        property domRoot

                                                        domRoot?: HTMLElement;
                                                        • 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.

                                                        property iconVariant

                                                        iconVariant?: Partial<Record<VariantType, React.ReactNode>>;
                                                        • Mapping between variants and an icon component

                                                        property maxSnack

                                                        maxSnack?: number;
                                                        • Maximum snackbars that can be stacked on top of one another. 3

                                                        property ref

                                                        ref?: React.Ref<SnackbarProvider>;
                                                        • SnackbarProvider's ref

                                                        interface TransitionComponentProps

                                                        interface TransitionComponentProps extends Omit<TransitionProps, 'children'> {}

                                                          property children

                                                          children: (
                                                          status: TransitionStatus,
                                                          childProps: Record<string, any>
                                                          ) => React.ReactNode;

                                                            property nodeRef

                                                            nodeRef: React.RefObject<HTMLDivElement>;

                                                              interface TransitionDuration

                                                              interface TransitionDuration {}

                                                                property enter

                                                                enter?: number;

                                                                  property exit

                                                                  exit?: number;

                                                                    interface TransitionHandlerProps

                                                                    interface TransitionHandlerProps {}
                                                                    • Shared

                                                                    property onEnter

                                                                    onEnter: (node: HTMLElement, isAppearing: boolean, key: SnackbarKey) => void;
                                                                    • Callback fired before the transition is entering.

                                                                    property onEntered

                                                                    onEntered: (node: HTMLElement, isAppearing: boolean, key: SnackbarKey) => void;
                                                                    • Callback fired when the transition has entered.

                                                                    property onExit

                                                                    onExit: (node: HTMLElement, key: SnackbarKey) => void;
                                                                    • Callback fired before the transition is exiting.

                                                                    property onExited

                                                                    onExited: (node: HTMLElement, key: SnackbarKey) => void;
                                                                    • Callback fired when the transition has exited.

                                                                    interface TransitionProps

                                                                    interface TransitionProps {}

                                                                      property addEndListener

                                                                      addEndListener?: (
                                                                      node: HTMLElement | HTMLDivElement,
                                                                      callback: () => void
                                                                      ) => void;

                                                                        property appear

                                                                        appear?: boolean;

                                                                          property children

                                                                          children: React.ReactNode;

                                                                            property direction

                                                                            direction?: SlideTransitionDirection;
                                                                            • The direction in which a snackbar slides into the screen. Only applicable if TransitionComponent is Slide

                                                                            property enter

                                                                            enter?: boolean;
                                                                            • Enable or disable enter transitions.

                                                                            property exit

                                                                            exit?: boolean;
                                                                            • Enable or disable exit transitions.

                                                                            property in

                                                                            in?: boolean;
                                                                            • Show the component; triggers the enter or exit states

                                                                            property mountOnEnter

                                                                            mountOnEnter?: boolean;
                                                                            • By default the child component is mounted immediately along with the parent Transition component. If you want to "lazy mount" the component on the first in={true} you can set mountOnEnter. After the first enter transition the component will stay mounted, even on "exited", unless you also specify unmountOnExit.

                                                                            property onEnter

                                                                            onEnter?: (node: HTMLElement, isAppearing: boolean) => void;
                                                                            • Callback fired before the transition is entering.

                                                                            property onEntered

                                                                            onEntered?: (node: HTMLElement, isAppearing: boolean) => void;
                                                                            • Callback fired when the transition has entered.

                                                                            property onEntering

                                                                            onEntering?: (node: HTMLElement, isAppearing: boolean) => void;
                                                                            • Callback fired when the transition is entering.

                                                                            property onExit

                                                                            onExit?: (node: HTMLElement) => void;
                                                                            • Callback fired before the transition is exiting.

                                                                            property onExited

                                                                            onExited?: (node: HTMLElement) => void;
                                                                            • Callback fired when the transition has exited.

                                                                            property onExiting

                                                                            onExiting?: (node: HTMLElement) => void;
                                                                            • Callback fired when the transition is existing.

                                                                            property style

                                                                            style?: React.CSSProperties;
                                                                            • Can be used to apply a custom transitionTimingFunction (e.g. your own easing), transitionDuration and transitionDelay.

                                                                            property timeout

                                                                            timeout?: number | TransitionDuration;
                                                                            • The duration of the transition, in milliseconds

                                                                            property unmountOnExit

                                                                            unmountOnExit?: boolean;
                                                                            • By default the child component stays mounted after it reaches the 'exited' state. Set unmountOnExit if you'd prefer to unmount the component after it finishes exiting.

                                                                            interface VariantOverrides

                                                                            interface VariantOverrides {}

                                                                              Type Aliases

                                                                              type BaseVariant

                                                                              type BaseVariant = 'default' | 'error' | 'success' | 'warning' | 'info';

                                                                                type ClassNameMap

                                                                                type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;

                                                                                  type CloseReason

                                                                                  type CloseReason = 'timeout' | 'maxsnack' | 'instructed';

                                                                                    type CombinedClassKey

                                                                                    type CombinedClassKey = ContainerClassKey | SnackbarClassKey;

                                                                                      type ContainerClassKey

                                                                                      type ContainerClassKey =
                                                                                      | 'containerRoot'
                                                                                      | 'containerAnchorOriginTopCenter'
                                                                                      | 'containerAnchorOriginBottomCenter'
                                                                                      | 'containerAnchorOriginTopRight'
                                                                                      | 'containerAnchorOriginBottomRight'
                                                                                      | 'containerAnchorOriginTopLeft'
                                                                                      | 'containerAnchorOriginBottomLeft';

                                                                                        type CustomContentProps

                                                                                        type CustomContentProps = Omit<InternalSnack, NotNeededByCustomSnackbar>;
                                                                                        • Props that will be passed to a custom component in SnackbarProvider Components prop

                                                                                        type GetWhitelistedVariants

                                                                                        type GetWhitelistedVariants<V extends string, U> = OmitNever<
                                                                                        MarkInvalidVariantAsNever<Override<Record<V, true>, U>>

                                                                                          type MarkInvalidVariantAsNever

                                                                                          type MarkInvalidVariantAsNever<T> = {
                                                                                          [Key in keyof T]: T[Key] extends true
                                                                                          ? T[Key]
                                                                                          : T[Key] extends Record<string, unknown>
                                                                                          ? T[Key]
                                                                                          : never;

                                                                                            type NeededByInternalSnack

                                                                                            type NeededByInternalSnack =
                                                                                            | 'style'
                                                                                            | 'persist'
                                                                                            | 'variant'
                                                                                            | 'anchorOrigin'
                                                                                            | 'TransitionComponent'
                                                                                            | 'TransitionProps'
                                                                                            | 'transitionDuration'
                                                                                            | 'hideIconVariant'
                                                                                            | 'disableWindowBlurListener';

                                                                                              type NotNeededByCustomSnackbar

                                                                                              type NotNeededByCustomSnackbar =
                                                                                              | keyof InternalSnackAttributes
                                                                                              | keyof TransitionHandlerProps
                                                                                              | 'onClose'
                                                                                              | 'SnackbarProps'
                                                                                              | 'disableWindowBlurListener'
                                                                                              | 'TransitionComponent'
                                                                                              | 'transitionDuration'
                                                                                              | 'TransitionProps'
                                                                                              | 'dense'
                                                                                              | 'content';

                                                                                                type OmitNever

                                                                                                type OmitNever<T> = Pick<
                                                                                                [Prop in keyof T]: [T[Prop]] extends [never] ? never : Prop;
                                                                                                }[keyof T]
                                                                                                • type MyType = { a: string b: never }

                                                                                                  OmitNever --> { a: string }

                                                                                                type OptionsWithExtraProps

                                                                                                type OptionsWithExtraProps<V extends VariantType> = VariantMap[V] extends true
                                                                                                ? OptionsObject<V>
                                                                                                : OptionsObject<V> & VariantMap[V];

                                                                                                  type Override

                                                                                                  type Override<T, U> = Omit<T, keyof U> & U;
                                                                                                  • type Type1 = { a: string; b: number } type Type2 = { b: boolean; c: string }

                                                                                                    Override<Type1, Type2> --> { a: string b: boolean c: string }

                                                                                                  type RequiredBy

                                                                                                  type RequiredBy<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;

                                                                                                    type SlideTransitionDirection

                                                                                                    type SlideTransitionDirection = 'down' | 'left' | 'right' | 'up';

                                                                                                      type SnackbarAction

                                                                                                      type SnackbarAction = React.ReactNode | ((key: SnackbarKey) => React.ReactNode);

                                                                                                        type SnackbarClassKey

                                                                                                        type SnackbarClassKey =
                                                                                                        | 'root'
                                                                                                        | 'anchorOriginTopCenter'
                                                                                                        | 'anchorOriginBottomCenter'
                                                                                                        | 'anchorOriginTopRight'
                                                                                                        | 'anchorOriginBottomRight'
                                                                                                        | 'anchorOriginTopLeft'
                                                                                                        | 'anchorOriginBottomLeft';

                                                                                                          type SnackbarContentCallback

                                                                                                          type SnackbarContentCallback =
                                                                                                          | React.ReactNode
                                                                                                          | ((key: SnackbarKey, message?: SnackbarMessage) => React.ReactNode);

                                                                                                            type SnackbarContentProps

                                                                                                            type SnackbarContentProps = React.HTMLAttributes<HTMLDivElement>;

                                                                                                              type SnackbarKey

                                                                                                              type SnackbarKey = string | number;

                                                                                                                type SnackbarMessage

                                                                                                                type SnackbarMessage = string | React.ReactNode;

                                                                                                                  type TransitionStatus

                                                                                                                  type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited' | 'unmounted';

                                                                                                                    type VariantMap

                                                                                                                    type VariantMap = GetWhitelistedVariants<BaseVariant, VariantOverrides>;

                                                                                                                      type VariantType

                                                                                                                      type VariantType = keyof VariantMap;

                                                                                                                        Package Files (1)

                                                                                                                        Dependencies (2)

                                                                                                                        Dev Dependencies (20)

                                                                                                                        Peer Dependencies (2)


                                                                                                                        To add a badge like this badgeto your package's README, use the codes available below.

                                                                                                                        You may also use to create a custom badge linking to

                                                                                                                        • Markdown
                                                                                                                        • HTML
                                                                                                                          <a href=""><img src="" alt=""></a>