Notistack v3 has been released!
Notistack
Docs
Documentation
Examples
Advanced
Guides

Getting started

Get started with Notistack and learn by exploring interactive examples.

Use your preferred package manager:

npm install notistack
yarn add notistack

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

import { SnackbarProvider, enqueueSnackbar } from 'notistack'

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

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
<SnackbarProvider>
  <App />
  <MyButton />
</SnackbarProvider>

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

Here are the two functions you can use to display and dismiss (hide) Snackbars:

Adds a snackbar to the queue to be displayed to the user. It takes two arguments message and an object of options and returns a key that is used to reference that snackbar later on (e.g. to dismiss it programmatically).

const key = enqueueSnackbar(message, options)

// or
const key = enqueueSnackbar({ message, ...options })

Dismiss snackbar with the given key. You can close all snackbars at once by not passing a key to this function.

// dismiss all open snackbars
closeSnackbar()

// dismiss a specific snackbar by passing 
// the key returned from enqueueSnackbar
closeSnackbar(key)