Stacking behaviour	Dismiss oldest when reached maxSnack (3 here)

Table of Contents

• How to use
• Online demo
• Documentation
• Redux / Mobx support

Getting Started

Use your preferred package manager:

npm install notistack
yarn add notistack

If you're using Material-UI version 4.x.x or lower, download a compatible version of notistack using:

npm install notistack@latest-mui-v4
yarn add notistack@latest-mui-v4

How to use

1: Wrap your app inside a SnackbarProvider component: (see docs for a full list of available props)
Note: If you're using material-ui ThemeProvider, make sure SnackbarProvider is a child of it.

1import { SnackbarProvider } from "notistack";
2
3<SnackbarProvider maxSnack={3}>
4  <App />
5</SnackbarProvider>;

2: Export any component that needs to send notification using withSnackbar. By doing this, you'll have access to methods enqueueSnackbar and closeSnackbar, where the former can be used to send snackbars.

1import { withSnackbar } from "notistack";
2
3class MyComponent extends Component {
4  handleNetworkRequest = () => {
5    fetchSomeData()
6      .then(() => this.props.enqueueSnackbar("Successfully fetched the data."))
7      .catch(() => this.props.enqueueSnackbar("Failed fetching data."));
8  };
9
10  render() {
11    //...
12  }
13}
14
15export default withSnackbar(MyComponent);

2 (alternative): You can use useSnackbar hook in your functional components as well.

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

Online demo

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

Redux and Mobx support:

notistack is compatible with state management libraries such as Redux and Mobx.

Contribution

Open an issue and your problem will be solved.

Author - Contact

Hossein Dehnokhalaji