Highly customizable notification snackbars (toasts) that can be stacked on top of each other


Keywords
notistack, enqueueSnackbar, snackbarprovider, useSnackbar, multiple, react, javascript, material-ui, toast, redux, snackbar, stacked, notification, material design, hossein, dehnokhalaji, iamhosseindhv, google-material, material-design, notifications, reactjs, stack, toast-notifications
License
MIT
Install
npm install notistack@2.0.3

Documentation

notistack logo

Notistack: Display notifications with call of a function.

Easy to use, customizable, smooth transitions, stack and queue them up!

Table of Contents

Getting Started

Use your preferred package manager:

npm install notistack
yarn add notistack

Version guide

Version Notes
v3.x.x Latest stable release. Standalone (i.e. not dependent on material-ui)
<= v2.0.8 Requires Material-UI v5 as peer dependency. npm install notistack@2.0.8
<= 1.0.10 Requires Material-UI <= v4 as peer dependency. npm install notistack@latest-mui-v4

How to use

Instantiate a SnackbarProvider component and start showing snackbars: (see docs 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>;
};

Online demo

Visit the documentation website to see all the examples.
Or play with a minimal working example: codesandbox

Contribution

Open an issue and your problem will be solved.

Author - Contact

Hossein Dehnokhalaji

Hossein Dehnokhalaji Instagram profile Hossein Dehnokhalaji Linkedin profile Hossein Dehnokhalaji email address