Highly customizable notification snackbars (toasts) that can be stacked on top of each other
Table of Contents
--
- [How to use](#how-to-use)
- [Online demo](#online-demo)
- [Documentation](https://notistack.com/api-reference)
## 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](https://github.com/mui/material-ui)) |
| <= `v2.0.8` | Requires Material-UI v5 as peer dependency. `npm install [email protected]` |
| <= `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](https://notistack.com/api-reference) for a full list of available props)
```jsx
import { SnackbarProvider, enqueueSnackbar } from 'notistack';
const App = () => {
return (
);
};
```
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:
```jsx
import { SnackbarProvider, useSnackbar } from 'notistack';
// wrap your app
const MyButton = () => {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
return enqueueSnackbar('I love hooks')}>Show snackbar;
};
```
### Online demo
**Visit the [`documentation website`](https://notistack.com/features/basic) 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)
### Contribution
Open an issue and your problem will be solved.
### Author - Contact
Hossein Dehnokhalaji