Installations
npm install react-notistackDeveloper Guide
Typescript
No
Module System
CommonJS
Node Version
16.13.2
NPM Version
8.9.0
Score
62.9
Supply Chain
91
Quality
75.5
Maintenance
100
Vulnerability
100
License
Releases
Updated react version
Published on 25 May 2022
Fixed icons array issue.
Published on 18 Apr 2021
Updated responsive behaviour and added custom icons.
Published on 18 Apr 2021
Fixed stack related issue.
Published on 17 Apr 2021
v1.2.0
Published on 17 Apr 2021
v1.1.2
Published on 17 Apr 2021
Contributors
Unable to fetch Contributors
Languages
JavaScript (69.82%)
SCSS (28.6%)
HTML (1.58%)
Developer
Download Statistics
Total Downloads
6,641
Last Day
1
Last Week
21
Last Month
98
Last Year
1,785
GitHub Statistics
1 Stars
24 Commits
1 Watching
1 Branches
1 Contributors
Bundle Size
17.99 kB
Minified
6.19 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
1.3.0
Package Id
react-notistack@1.3.0
Unpacked Size
227.46 kB
Size
62.06 kB
File Count
21
NPM Version
8.9.0
Node Version
16.13.2
Total Downloads
Cumulative downloads
Total Downloads
6,641
Last day
-88.9%
1
Compared to previous day
Last week
-38.2%
21
Compared to previous week
Last month
16.7%
98
Compared to previous month
Last year
-35.4%
1,785
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
React Snackbar
A minimal beautiful standalone Toast/Snackbar for your react web application.
Table of Contents
Getting Started
Use your preferred package manager:
npm install react-notistack
yarn add react-notistack
How to use
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.
1import { SnackbarProvider } from 'react-notistack'; 2 3<SnackbarProvider maxSnack={3}> 4 <App /> 5</SnackbarProvider> 6
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.
1import { withSnackbar } from 'react-notistack'; 2 3class MyComponent extends Component { 4 handleNetworkRequest = () => { 5 fetchSomeData() 6 .then(() => this.props.enqueueSnackbar('Successfully fetched the data.')) 7 .catch(() => this.props.enqueueSnackbar('Failed fetching data.')); 8 }; 9 10 render(){ 11 //... 12 }; 13 14}; 15 16export default withSnackbar(MyComponent);
2 (alternative): You can use useSnackbar hook in your functional components as well.
1import { useSnackbar } from 'react-notistack'; 2 3const MyButton = () => { 4 const { enqueueSnackbar, closeSnackbar } = useSnackbar(); 5 6 const handleClick = () => { 7 enqueueSnackbar('I love hooks'); 8 }; 9 10 return ( 11 <Button onClick={handleClick}>Show snackbar</Button> 12 ); 13}
Online demo
Demo here
API
Will be added soon.
To Do
- Further improvement
Credits
This snackbar idea is comes from Notistack by Hossein Dehnokhalaji which is depend on material-ui.
And the design of snackbar/toastr catched from bootstrap.
Contribution
Open an issue and your problem will be solved.
Author - Contact
Saiful Alam - https://msar.me
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
Found 0/24 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
71 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Score
1.3
/10
Last Scanned on 2024-12-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to react-notistack
notistack
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
notistack-mod
Notistack with ability to modify active snackbars.
@durrtagnan/notistack
Fork of highly customizable notification snackbars (toasts) that can be stacked on top of each other
mui-message
Send messages (snackBar messages) as convenient as using antd when use MUI(@mui/material), without using hooks or creating Snackbar components frequently.