Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
notistack5
Advanced tools
Changelog
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) |
---|---|
Use your preferred package manager:
npm install notistack
yarn add notistack
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>
);
}
Visit documentation website
to see all the demos.
Or play with a minimal working example: codesandbox
notistack is compatible with state management libraries such as Redux and Mobx. See notistack documentation for more info.
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 notistack5 receives a total of 414 weekly downloads. As such, notistack5 popularity was classified as not popular.
We found that notistack5 demonstrated a not healthy version release cadence and project activity because the last version was released 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.