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.
notistack snackbars toast stacking behavior
Getting Started
Use your preferred package manager:
npm install notistack
yarn add notistack 
How to use
1: Wrap your app inside a SnackbarProvider component: (see API reference for a full list of available props)
Note: If you're using material-ui ThemeProvider, make sure SnackbarProvider is a child of it.
import { SnackbarProvider } from 'notistack';

    <MyApp />
2: Export any component that needs to send notification using withSnackbar. By doing this, you'll have access to two methods enqueueSnackbarand closeSnackbar, where the former can be used to send snackbars.
import { withSnackbar } from 'notistack';

class MyComponent extends Component {
    handleConnectionLoss = () => {
        this.key = this.props.enqueueSnackbar('You're offline.');

    handleBackOnline = () => {

    render() {

export default withSnackbar(MyComponent);
2 (alternative): You can use useSnackbar hook in your functional components as well.
import { useSnackbar } from 'notistack';

const MyButton = () => {
    const { enqueueSnackbar, closeSnackbar } = useSnackbar();

    const handleClick = () => {
        enqueueSnackbar('I love hooks');

    return (
        <Button onClick={handleClick}>Show snackbar</Button>
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 = this.props.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

// dismiss a specific snackbar