Easy to use, customizable, smooth transitions, stack and queue them up!
| 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
Version guide
| Version | Notes | --- | --- | |v3.x.x
| Latest stable release. Standalone (i.e. not dependent on material-ui) |
| <= v2.0.8
| Requires Material-UI v5 as peer dependency. npm install notistack@2.0.8
|
| <= 1.0.10
| Requires Material-UI <= v4 as peer dependency. npm install notistack@latest-mui-v4
|How to use
Instantiate aSnackbarProvider
component and start showing snackbars: (see docs for a full list of available props)import { SnackbarProvider, enqueueSnackbar } from 'notistack';
const App = () => {
return (
<div>
<SnackbarProvider />
<button onClick={() => enqueueSnackbar('That was easy!')}>Show snackbar</button>
</div>
);
};
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:import { SnackbarProvider, useSnackbar } from 'notistack';
// wrap your app
<SnackbarProvider>
<App />
<MyButton />
</SnackbarProvider>
const MyButton = () => {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
return <Button onClick={() => enqueueSnackbar('I love hooks')}>Show snackbar</Button>;
};
Online demo
Visit thedocumentation website
to see all the examples.Or play with a minimal working example: codesandbox