Notistack is a Snackbar library which makes it extremely easy to display notifications on your web apps. It is highly customizable and enables you to stack snackbars/toasts on top of one another. See demos for more info.
|Stacking behaviour||Dismiss oldest when reached maxSnack (3 here)|
Table of Contents
Use your preferred package manager:
npm install notistack yarn add notistack
How to use
1: Wrap your app inside a
SnackbarProvider component: (see docs for a full list of available props)
import SnackbarProvider from 'notistack';<SnackbarProvider =><App /></SnackbarProvider>
2: Export any component that needs to send notification using
withSnackbar. By doing this, you'll have access to methods
closeSnackbar, where the former can be used to send snackbars.
Redux and Mobx support:
notistack is compatible with state management libraries such as Redux and Mobx. See notistack documentation for more info.
Open an issue and your problem will be solved.
Material Design guidelines suggests that only one snackbar should be displayed at a time. But I liked to stack them. 😁 So I made notistack. But if you'd like to stick to the guidelines, you can set
1 and just take advantage of
Author - Contact