Notistack

Highly customizable notification snackbars (toasts) that can be stacked on ...

iamhosseindhv/notistack notistack.com notistack

README

[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 documentation website for demos.

Stacking	Dismiss
---	---

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.

``` js
import { SnackbarProvider } from 'notistack';
<SnackbarProvider maxSnack={3}>
<App />
</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.

``` js
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.

``` js
import { useSnackbar } from 'notistack';
const MyButton = () => {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const handleClick = () => {
enqueueSnackbar('I love hooks');
};
return (
<Button onClick={handleClick}>Show snackbar</Button>
);
}
```

Online demo

**Visit [`documentation website`](https://notistack.com/examples) to see all the demos.**
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.

Contribution

Open an issue and your problem will be solved.

Author - Contact

Hossein Dehnokhalaji