Skip to content

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


Notifications You must be signed in to change notification settings


Repository files navigation

notistack logo

Notistack: Display notifications with call of a function.

Easy to use, customizable, smooth transitions, stack and queue them up!

Table of Contents

Getting Started

Use your preferred package manager:

npm install notistack
yarn add notistack

Version guide

Version Notes
v3.x.x Latest stable release. Standalone (i.e. not dependent on material-ui)
<= v2.0.8 Requires Material-UI v5 as peer dependency. npm install notistack@2.0.8
<= 1.0.10 Requires Material-UI <= v4 as peer dependency. npm install notistack@latest-mui-v4

How to use

Instantiate a SnackbarProvider component and start showing snackbars: (see docs for a full list of available props)

import { SnackbarProvider, enqueueSnackbar } from 'notistack';

const App = () => {
  return (
      <SnackbarProvider />
      <button onClick={() => enqueueSnackbar('That was easy!')}>Show snackbar</button>

Alternatively, You can use useSnackbar hook to display Snackbars. Just remember to wrap your app inside of a SnackbarProvider to have access to the hook context:

import { SnackbarProvider, useSnackbar } from 'notistack';

// wrap your app
  <App />
  <MyButton />

const MyButton = () => {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
  return <Button onClick={() => enqueueSnackbar('I love hooks')}>Show snackbar</Button>;

Online demo

Visit the documentation website to see all the examples.
Or play with a minimal working example: codesandbox


Open an issue and your problem will be solved.

Author - Contact

Hossein Dehnokhalaji

Hossein Dehnokhalaji Instagram profile Hossein Dehnokhalaji Linkedin profile Hossein Dehnokhalaji email address