Notistack npm library documentation website logo

Basic features

Notistack supports Snackbars to be stacked. This is possible by defining maximum number of snackbars that can be stacked on top of each other.

Although you have full control over this maximum number, it is good to keep in mind that a typical use case for Snackbar/alerts is to display critical information. Users of an app may have special needs and be using assitive technologies which provide special behaviors to bring an alert to user' attention. For example, a screen reader may pause all other speech and read the content of the Snackbar.

As a result, it is important not to keep interrupting a user journey flow by frequently displaying multiple Snackbars at the same time. Try to display Snackbars infrequently to allow users with attention disorders to focus on the content. Failure to do so makes it difficult to meet certain accessibility requirements. According to Google Material Guidelines, when multiple updates are necessary, an app should only display one Snackbar at a time. Meaning that is it recommended for you to set maxSnack to 1.

stack up to 3
<SnackbarProvider maxSnack={3}>
  <App />
</SnackbarProvider>

By default, Snackbars are dismissed after 5 seconds. This timer is paused when browser tab is blured, and it resumes when browser tab is focused again. autoHideDuration can be used to customize this behavior. Alternatively, by using persist option, auto-hide can be disabled to keep Snackbars in the view indefinitely. Take extra care when using this option as persistent Snackbars can only get dismissed programmatically or by providing an action button.

Avoid displaying Snackbars that disappear quickly by keeping them in view for at least 4 seconds. Many users with blindless, low vision, physical or cognitive limitations may take longer to read text or respond. Always ensure users have sufficient time to respond or complete a task. It is a good practice to try to limit the amount of content on an app that requires timed interaction.

Note: When persist is set to true, if all of the Snackbars on the screen are persistent, Notistack will ignore the oldest Snackbar anyway to allow room for new Snackbars to be displayed (for example, you enqueue 3 persistent snackbars while maxSnack is 3).

<SnackbarProvider autoHideDuration={1000}>
  <App />
</SnackbarProvider>

const message = 'Your notification here'
enqueueSnackbar(message, { autoHideDuration: 1000 })

Snackbars can have actions (usually in the form of an inline button) which allow users to take actions on an operation performed by the application. A typical example is to add a dismiss or close button to Snackbars (although this is unnecessary if a Snackbar disappears automatically).

The built-in Snackbars that come with notistack, offer the action option which makes is easy to display action(s) in a Snackbar. Note that this prop does not do anything if you are displaying a custom component.

Snackbars should be used to give users feedback on a process performed by the application. These are usually short, informative messages. To make your app more usable, do not use Snackbars as the only way for a user to access a core user journey.

// add action to an individual snackbar
const action = snackbarId => (
  <>
    <button onClick={() => { alert(`I belong to snackbar with id ${snackbarId}`); }}>
      Undo
    </button>
    <button onClick={() => { closeSnackbar(snackbarId) }}>
      Dismiss
    </button>
  </>
);

enqueueSnackbar('Your post has been archived', {
  action,
})

An action can also be globally passed to all Snackbars:

// add action to all snackbars
import { closeSnackbar } from 'notistack'

<SnackbarProvider
  ref={myRef}
  action={(snackbarId) => (
    <button onClick={() => closeSnackbar(snackbarId)}>
      Dismiss
    </button>
  )}
>
    <App />
</SnackbarProvider>

Sometimes the reason for displaying a Snackbar is no longer applicable. For example, an app may display an alert when it detects loss of internet connectivity. Once the connection issue is resolved, you can dismiss/close the Snackbar programmatically and without user interaction.

Use the id returned by enqueueSnackbarto close Snackbars programmatically. You can also dismiss all snackbars at once, by calling closeSnackbar without any arguments.

// on connection loss
const snackbarId = enqueueSnackbar('No connection!', { 
  variant: 'error',
  persist: true
})

// when we're back online
closeSnackbar(snackbarId)

// close all snackbars
closeSnackbar()

Set preventDuplicate to true to prevent Snackbars with the same message to be displayed multiple times. If a user-defined key is passed in the options of enqueueSnackbar, then this prevents snackbars with the same key to be displayed multiple times.

<SnackbarProvider>
  <App />
</SnackbarProvider>

const message = 'Your notification here'
enqueueSnackbar(message, { 
  preventDuplicate: false
})