Getting started
Get started with Notistack and learn by exploring interactive examples.
Use your preferred package manager:
npm install notistack
yarn add notistack
Instantiate a SnackbarProvider
component and start showing snackbars: (see API reference 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>
)
}
Here are the two functions you can use to display and dismiss (hide) Snackbars:
Adds a snackbar to the queue to be displayed to the user. It takes two arguments message
and an object of options
and returns a key that is used to reference that snackbar later on (e.g. to dismiss it programmatically).
const key = enqueueSnackbar(message, options)
// or
const key = enqueueSnackbar({ message, ...options })
Dismiss snackbar with the given key. You can close all snackbars at once by not passing a key to this function.
// dismiss all open snackbars
closeSnackbar()
// dismiss a specific snackbar by passing
// the key returned from enqueueSnackbar
closeSnackbar(key)