
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
notistack
Advanced tools
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
notistack is a highly customizable notification library for React. It allows you to display snackbars (toasts) with ease and provides a variety of options for customization, including positioning, duration, and styling.
Basic Snackbar
This code demonstrates how to display a basic snackbar using notistack. The `SnackbarProvider` component wraps the application, and the `useSnackbar` hook is used to trigger the snackbar.
import React from 'react';
import { SnackbarProvider, useSnackbar } from 'notistack';
function App() {
const { enqueueSnackbar } = useSnackbar();
const handleClick = () => {
enqueueSnackbar('This is a basic snackbar');
};
return (
<div>
<button onClick={handleClick}>Show Snackbar</button>
</div>
);
}
export default function IntegrationNotistack() {
return (
<SnackbarProvider maxSnack={3}>
<App />
</SnackbarProvider>
);
}
Custom Snackbar Variants
This code demonstrates how to display snackbars with different variants (success, error, warning, info) using notistack. The `enqueueSnackbar` function is called with a variant option to customize the type of snackbar.
import React from 'react';
import { SnackbarProvider, useSnackbar } from 'notistack';
function App() {
const { enqueueSnackbar } = useSnackbar();
const handleClickVariant = (variant) => () => {
enqueueSnackbar('This is a ' + variant + ' snackbar', { variant });
};
return (
<div>
<button onClick={handleClickVariant('success')}>Show Success Snackbar</button>
<button onClick={handleClickVariant('error')}>Show Error Snackbar</button>
<button onClick={handleClickVariant('warning')}>Show Warning Snackbar</button>
<button onClick={handleClickVariant('info')}>Show Info Snackbar</button>
</div>
);
}
export default function IntegrationNotistack() {
return (
<SnackbarProvider maxSnack={3}>
<App />
</SnackbarProvider>
);
}
Custom Snackbar Styling
This code demonstrates how to apply custom styling to a snackbar using notistack. The `makeStyles` function from Material-UI is used to create custom styles, which are then applied to the snackbar via the `enqueueSnackbar` function.
import React from 'react';
import { SnackbarProvider, useSnackbar } from 'notistack';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
customSnackbar: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
},
}));
function App() {
const classes = useStyles();
const { enqueueSnackbar } = useSnackbar();
const handleClick = () => {
enqueueSnackbar('This is a custom styled snackbar', {
classes: {
root: classes.customSnackbar,
},
});
};
return (
<div>
<button onClick={handleClick}>Show Custom Styled Snackbar</button>
</div>
);
}
export default function IntegrationNotistack() {
return (
<SnackbarProvider maxSnack={3}>
<App />
</SnackbarProvider>
);
}
react-toastify is another popular library for displaying toast notifications in React applications. It offers a simple API and a variety of customization options. Compared to notistack, react-toastify is more focused on ease of use and quick setup, while notistack provides more advanced customization and control over the snackbars.
Material-UI is a comprehensive library of React components that implement Google's Material Design. It includes a Snackbar component that can be used for notifications. While Material-UI's Snackbar is powerful and integrates well with other Material-UI components, notistack offers a more specialized and flexible solution for managing snackbars, including stacking and dismissing multiple notifications.
react-notifications-component is a library for creating customizable notifications in React. It supports various types of notifications and provides a range of customization options. Compared to notistack, react-notifications-component offers a broader range of notification types but may not provide the same level of integration and ease of use for snackbars specifically.
Notistack: Display notifications with call of a function.
Stacking behaviour | Dismiss oldest when reached maxSnack (3 here) |
---|---|
![]() | ![]() |
Use your preferred package manager:
npm install notistack
yarn add notistack
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 |
Instantiate a SnackbarProvider
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>;
};
Visit the documentation website
to see all the examples.
Or play with a minimal working example: codesandbox
Open an issue and your problem will be solved.
Hossein Dehnokhalaji
FAQs
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
The npm package notistack receives a total of 540,355 weekly downloads. As such, notistack popularity was classified as popular.
We found that notistack demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.