Gathering detailed insights and metrics for react-toastify-redux
Gathering detailed insights and metrics for react-toastify-redux
Installations
npm install react-toastify-reduxDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
9.5.0
NPM Version
5.6.0
Score
58.6
Supply Chain
92.9
Quality
75.1
Maintenance
100
Vulnerability
100
License
Releases
2
Contributors
2
Unable to fetch Contributors
Languages
2
TypeScript
JavaScript
TypeScript (94.84%)
JavaScript (5.16%)
Developer
fayster
Download Statistics
Total Downloads
144,015
Last Day
3
Last Week
181
Last Month
1,205
Last Year
21,265
GitHub Statistics
22 Stars
12 Commits
7 Forks
3 Watching
2 Branches
2 Contributors
Maintainers
1
Package Meta Information
Latest Version
1.0.0-rc.2
Package Id
react-toastify-redux@1.0.0-rc.2
Unpacked Size
75.85 kB
Size
18.98 kB
File Count
28
NPM Version
5.6.0
Node Version
9.5.0
Total Downloads
Cumulative downloads
Total Downloads
144,015
Last day
-94.6%
3
Compared to previous day
Last week
-38.2%
181
Compared to previous week
Last month
1%
1,205
Compared to previous month
Last year
4.2%
21,265
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
4
Dev Dependencies
24
Versions
React Toastify Redux 
Wraps react-toastify into a component and exposes actions and reducer.
Installation
$ npm install --save react-toasify-redux
$ yarn add react-toastify-redux
Usage
Import the reducer and pass it to your combineReducers:
1import {combineReducers} from 'redux'; 2import {toastsReducer as toasts} from 'react-toasify-redux'; 3 4export default combineReducers({ 5 // ...other reducers 6 toasts 7});
Include the toast controller in main view:
1import {ToastController} from 'react-toasify-redux'; 2 3export default () => { 4 return ( 5 <div> 6 ... 7 <ToastController /> 8 </div> 9 ); 10};
Actions
Use actions for create, update and remove toasts:
1import {dismiss, update, error, message, warning, success, info} from 'react-toastify-redux'; 2 3dispatch(dismiss(id)); 4dispatch(dismiss()); // dismiss all toasts 5dispatch(update(id, options)); 6dispatch(message('Default message')); 7dispatch(success('Success message')); 8dispatch(error('Error message')); 9dispatch(warning('Warning message')); 10dispatch(info('Info message'));
Customization toast
Create toast component
1export default ({ type, message }) => ( 2 <div className='toast'> 3 <div className='header'>{type}</div> 4 <div className='message'>{message}</div> 5 </div> 6);
Include this component in ToastConroller
1import {ToastController} from 'react-toasify-redux'; 2import CustomToastComponent from 'awesome-folder/custom-toast-component'; 3 4export default () => { 5 return ( 6 <div> 7 ... 8 <ToastController toastComponent={CustomToastComponent} /> 9 </div> 10 ); 11};
API
ToastContainer
ToastContainer extends properties from ToastContainer in react-toastify. Also have new properties:
| Props | Type | Default | Description |
|---|---|---|---|
| toastComponent | ComponentClass or false | - | Element that will be displayed after emit toast |
Dismiss
| Parameter | Type | Required | Description |
|---|---|---|---|
| toast id | string | ✘ | Id toast for dismiss. If call action without id, then dismiss all toasts |
Update
| Parameter | Type | Required | Description |
|---|---|---|---|
| toast id | string | ✓ | Id toast for update |
| options | object | ✘ | Options listed below |
- Available options :
- See: Toast Base Options
- message: toast message for update
Toast Actions (Message, Success, Info, Warning, Error)
| Parameter | Type | Required | Description |
|---|---|---|---|
| message | string | ✓ | Message for toast |
| options | object | ✘ | Options listed below |
- Available options :
- See: Toast Base Options
- id: custom id for a toast. By default in generated automatically.
Toast Base Options
| Parameter | Type | Default | Description | |||
|---|---|---|---|---|---|---|
| renderDefaultComponent | boolean | false | Render default toast component? Use this propery if using custom toast component. | |||
| type | sa# React Toastify Redux | |||||
| Wraps react-toastify into a component and exposes actions and reducer. | ||||||
Installation
$ npm install --save react-toasify-redux
$ yarn add react-toastify-redux
Usage
Import the reducer and pass it to your combineReducers:
1import {combineReducers} from 'redux'; 2import {toastsReducer as toasts} from 'react-toasify-redux'; 3 4export default combineReducers({ 5 // ...other reducers 6 toasts 7});
Include the toast controller in main view:
1import {ToastController} from 'react-toasify-redux'; 2 3export default () => { 4 return ( 5 <div> 6 ... 7 <ToastController /> 8 </div> 9 ); 10};
Actions
Use actions for create, update and remove toasts:
1import {dismiss, update, error, message, warning, success, info} from 'react-toastify-redux'; 2 3dispatch(dismiss(id)); 4dispatch(dismiss()); // dismiss all toasts 5dispatch(update(id, options)); 6dispatch(message('Default message')); 7dispatch(success('Success message')); 8dispatch(error('Error message')); 9dispatch(warning('Warning message')); 10dispatch(info('Info message'));
Customization toast
Create toast component
1export default ({ title, message }) => ( 2 <div className='toast'> 3 <div className='header'>{title}</div> 4 <div className='message'>{message}</div> 5 </div> 6);
Include this component in ToastConroller
1import {ToastController} from 'react-toasify-redux'; 2import CustomToastComponent from 'awesome-folder/custom-toast-component'; 3 4export default () => { 5 return ( 6 <div> 7 ... 8 <ToastController toastComponent={CustomToastComponent} /> 9 </div> 10 ); 11};
API
ToastContainer
ToastContainer extends properties from ToastContainer in react-toastify. Also have new properties:
| Props | Type | Default | Description |
|---|---|---|---|
| toastComponent | ComponentClass or false | - | Element that will be displayed after emit toast |
Dismiss
| Parameter | Type | Required | Description |
|---|---|---|---|
| toast id | string | ✘ | Id toast for dismiss. If call action without id, then dismiss all toasts |
Update
| Parameter | Type | Required | Description |
|---|---|---|---|
| toast id | string | ✓ | Id toast for update |
| options | object | ✘ | Options listed below |
- Available options :
- See: Toast Base Options
- message: toast message for update
Toast Actions (Message, Success, Info, Warning, Error)
| Parameter | Type | Required | Description |
|---|---|---|---|
| message | string | ✓ | Message for toast |
| options | object | ✘ | Options listed below |
- Available options :
- See: Toast Base Options
- id: custom id for a toast. By default in generated automatically.
Toast Base Options
| Parameter | Type | Default | Description |
|---|---|---|---|
| renderDefaultComponent | boolean | false | Render default toast component? Use this propery if using custom toast component. |
| title | string | '' | Title for custom toast component |
| type | One of: 'info', 'success', 'warning', 'error', 'default' | 'default' | same as ToastContainer |
| autoClose | number or false | 5000 | Set the delay in ms to close the toast automatically |
| hideProgressBar | boolean | false | Hide or show the progress bar |
| position | One of: 'top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left' | 'top-right' | Set the default position to use |
| pauseOnHover | boolean | true | Pause the timer when the mouse hover the toast |
| className | string or object | - | An optional css class to set |
| bodyClassName | string or object | - | same as ToastContainer |
| progressClassName | string or object | - | same as ToastContainer |
| draggable | boolean | true | Allow toast to be draggable |
| draggablePercent | number | 80 | The percentage of the toast's width it takes for a drag to dismiss a toast |
License
Licensed under MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 1/8 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
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
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 7 are checked with a SAST tool
Reason
102 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr
- Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
- Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- 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-qrmc-fj45-qfc2
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
- Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- 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-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
- Warn: Project is vulnerable to: GHSA-mvjj-gqq2-p4hw
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
- Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
- 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-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.9
/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 More