Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iamhosseindhv/notistack
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
https://github.com/iamhosseindhv/notistack
google-material javascript material-design material-ui notifications reactjs redux snackbar stack toast toast-notifications
Last synced: 3 days ago
JSON representation
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
- Host: GitHub
- URL: https://github.com/iamhosseindhv/notistack
- Owner: iamhosseindhv
- License: other
- Created: 2018-08-04T21:05:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-06T20:45:23.000Z (4 months ago)
- Last Synced: 2024-12-02T13:24:01.616Z (10 days ago)
- Topics: google-material, javascript, material-design, material-ui, notifications, reactjs, redux, snackbar, stack, toast, toast-notifications
- Language: TypeScript
- Homepage: https://notistack.com
- Size: 5.57 MB
- Stars: 3,942
- Watchers: 23
- Forks: 298
- Open Issues: 59
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
- stars - iamhosseindhv/notistack
- awesome-react - notistack - Highly customizable notification snackbars (toasts) that can be stacked on top of each other. ![](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Star) (UI Components / Notification)
- best-of-react - GitHub - 10% open · ⏱️ 23.10.2023): (Notifications)
- awesome-material-ui - Notistack - Easy snackbars for Material-UI (so you don't have to deal with open/close state of them). (Components)
README
**[Notistack](https://notistack.com): Display notifications with call of a function.**
Easy to use, customizable, smooth transitions, stack and queue them up!
Documentation
·
Examples[![npm version](https://img.shields.io/npm/v/notistack.svg?label=version)](https://www.npmjs.com/package/notistack)
[![npm downloads](https://img.shields.io/npm/dm/notistack.svg)](https://www.npmjs.com/package/notistack)
[![package license](https://img.shields.io/npm/l/notistack.svg)](https://www.npmjs.com/package/notistack)Table of Contents
--
- [How to use](#how-to-use)
- [Online demo](#online-demo)
- [Documentation](https://notistack.com/api-reference)## 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](https://github.com/mui/material-ui)) |
| <= `v2.0.8` | Requires Material-UI v5 as peer dependency. `npm install [email protected]` |
| <= `1.0.10` | Requires Material-UI <= v4 as peer dependency. `npm install notistack@latest-mui-v4` |### How to use
Instantiate a `SnackbarProvider` component and start showing snackbars: (see [docs](https://notistack.com/api-reference) for a full list of available props)
```jsx
import { SnackbarProvider, enqueueSnackbar } from 'notistack';const App = () => {
return (
enqueueSnackbar('That was easy!')}>Show snackbar
);
};
```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:
```jsx
import { SnackbarProvider, useSnackbar } from 'notistack';// wrap your app
const MyButton = () => {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
return enqueueSnackbar('I love hooks')}>Show snackbar;
};
```### Online demo
**Visit the [`documentation website`](https://notistack.com/features/basic) to see all the examples.**
Or play with a minimal working example: [codesandbox](https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/simple-example??hidenavigation=1&module=%2FApp.js)### Contribution
Open an issue and your problem will be solved.
### Author - Contact
Hossein Dehnokhalaji