Table of Contents

• How to use
• Online demo
• Documentation

Getting Started

Use your preferred package manager:

npm install notistack
yarn add notistack

Version guide

How to use

Instantiate a SnackbarProvider component and start showing snackbars: (see docs for a full list of available props)

1import { SnackbarProvider, enqueueSnackbar } from 'notistack';
2
3const App = () => {
4  return (
5    <div>
6      <SnackbarProvider />
7      <button onClick={() => enqueueSnackbar('That was easy!')}>Show snackbar</button>
8    </div>
9  );
10};

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:

1import { SnackbarProvider, useSnackbar } from 'notistack';
2
3// wrap your app
4<SnackbarProvider>
5  <App />
6  <MyButton />
7</SnackbarProvider>
8
9const MyButton = () => {
10  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
11  return <Button onClick={() => enqueueSnackbar('I love hooks')}>Show snackbar</Button>;
12};

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