notistack

property closeSnackbar

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

property enqueueSnackbar

enqueueSnackbar: EnqueueSnackbar;

method render

render: () => React.ReactNode;

call signature

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

call signature

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

property iconVariant

iconVariant: Record<string, React.ReactNode>;

property id

id: SnackbarKey;

property message

message?: SnackbarMessage;

property entered

entered: boolean;

property open

open: boolean;

property requestClose

requestClose: boolean;

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

property closeSnackbar

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

property enqueueSnackbar

enqueueSnackbar: EnqueueSnackbar;

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

  Deprecated

  - 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: https://notistack.com/examples/advanced/custom-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:

  timeout={500}

  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

property horizontal

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

property vertical

vertical: 'top' | 'bottom';

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

property children

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

property nodeRef

nodeRef: React.RefObject<HTMLDivElement>;

property enter

enter?: number;

property exit

exit?: number;

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.

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.