[**Notistack**](https://notistack.com) is a notification 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.
**Visit the [documentation website](https://notistack.com/examples) for demos**. [![npm version](https://img.shields.io/npm/v/notistack.svg?label=version)](https://www.npmjs.com/package/notistack) [![npm downloads](https://img.shields.io/npm/dm/notistack.svg)](https://www.npmjs.com/package/notistack) [![package license](https://img.shields.io/npm/l/notistack.svg)](https://www.npmjs.com/package/notistack)

| Stacking behaviour | Dismiss oldest when reached maxSnack (3 here)| | --- | --- | |

|

| Table of Contents -- - [How to use](#how-to-use) - [Online demo](#online-demo) - [Documentation](https://notistack.com/notistack/api-reference) - [Redux / Mobx support](#redux-and-mobx-support) ## 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 [docs](https://notistack.com/notistack/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. ```jsx import { SnackbarProvider } from 'notistack'; ``` **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. ```javascript import { withSnackbar } from 'notistack'; class MyComponent extends Component { handleNetworkRequest = () => { fetchSomeData() .then(() => this.props.enqueueSnackbar('Successfully fetched the data.')) .catch(() => this.props.enqueueSnackbar('Failed fetching data.')); }; render(){ //... }; }; export default withSnackbar(MyComponent); ``` **2 (alternative):** You can use `useSnackbar` hook in your functional components as well. ```javascript import { useSnackbar } from 'notistack'; const MyButton = () => { const { enqueueSnackbar, closeSnackbar } = useSnackbar(); const handleClick = () => { enqueueSnackbar('I love hooks'); }; return ( ); } ``` ### Online demo **Visit the [`documentation website`](https://notistack.com/examples) to see all the examples.**
Or play with a minimal working example: [codesandbox](https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/simple-example??hidenavigation=1&module=%2FApp.js)
### Redux and Mobx support: notistack is compatible with state management libraries such as Redux and Mobx. See examples for [Redux](https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/redux-example) and [MobX](https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/mobx-example). ### Contribution Open an issue and your problem will be solved. ### Author - Contact Hossein Dehnokhalaji

notistack

Downloads in past 7 days

0

notistack

Downloads in past 7 days

0

Download

54.5M

Stars

3.1K

Forks

278

Issues

521