Getting started

Get started with Notistack and learn by exploring interactive examples.

Snackbar, Toast, Alert, Flag or Notification are all different names that refer to the same concept. They are used to display confirmation, alert or acknowledgement about a task carried out by the app. These event-driven messages, usually appear on the corner of center of the screen over the app content, and require minimal user interaction to disappear.

Notistack is available for download on npm registery. 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)