notistack alternatives and similar libraries
Based on the "Notification" category.
Alternatively, view notistack alternatives based on common mentions on social networks and blogs.
-
react-notifications-component
Delightful and highly customisable React Component to notify your users -
cogo-toast
Beautiful, Zero Configuration, Toast Messages for React. Only ~ 4kb gzip, with styles and icons
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
Do you think we are missing an alternative of notistack or a related project?
README
Notistack 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 behaviour | Dismiss oldest when reached maxSnack (3 here) |
|---|---|
Table of Contents
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.
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);
2 (alternative): You can use useSnackbar hook in your functional components as well.
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 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
*Note that all licence references and agreements mentioned in the notistack README section above
are relevant to that project's source code only.