notistack-sc
v0.9.0
Published
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
Downloads
3
Maintainers
Readme
notistack
Notistack is a Snackbar 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. See demos for more info.
Play with online demo here
| Stacking behaviour | Dismiss oldest when reached maxSnack (3 here)| | --- | --- | | | |
Table of Contents
Getting Started
Use your prefered package manager:
npm install notistack
yarn add notistack
How to use
1: Wrap your app inside a SnackbarProvider
component: (see docs for a full list of available props)
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.
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);
Online demo
You can see the online demo and experiment all the possible configurations here
.
Or see the code for a minimal working example: codesandbox
Documentation
Visit the documentation website
Redux and Mobx support:
notistack is compatible with state management libraries such as Redux and Mobx. See notistack documentation for more info.
Contribution
Open an issue and your problem will be solved.
Notes
Material Design guidelines suggests that only one snackbar should be displayed at a time. But I liked to stack them. 😁 So I made notistack. But if you'd like to stick to the guidelines, you can set maxSnack
to 1
and just take advantage of enqueueSnackbar
function.
Author - Contact
Hossein Dehnokhalaji