Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
react-toastify-redux
Advanced tools
Wraps react-toastify into a component and exposes actions and reducer.
$ npm install --save react-toasify-redux
$ yarn add react-toastify-redux
Import the reducer and pass it to your combineReducers:
import {combineReducers} from 'redux';
import {toastsReducer as toasts} from 'react-toasify-redux';
export default combineReducers({
// ...other reducers
toasts
});
Include the toast controller in main view:
import {ToastController} from 'react-toasify-redux';
export default () => {
return (
<div>
...
<ToastController />
</div>
);
};
Use actions for create, update and remove toasts:
import {dismiss, update, error, message, warning, success, info} from 'react-toastify-redux';
dispatch(dismiss(id));
dispatch(dismiss()); // dismiss all toasts
dispatch(update(id, options));
dispatch(message('Default message'));
dispatch(success('Success message'));
dispatch(error('Error message'));
dispatch(warning('Warning message'));
dispatch(info('Info message'));
Create toast component
export default ({ type, message }) => (
<div className='toast'>
<div className='header'>{type}</div>
<div className='message'>{message}</div>
</div>
);
Include this component in ToastConroller
import {ToastController} from 'react-toasify-redux';
import CustomToastComponent from 'awesome-folder/custom-toast-component';
export default () => {
return (
<div>
...
<ToastController toastComponent={CustomToastComponent} />
</div>
);
};
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 |
Parameter | Type | Required | Description |
---|---|---|---|
toast id | string | ✘ | Id toast for dismiss. If call action without id, then dismiss all toasts |
Parameter | Type | Required | Description |
---|---|---|---|
toast id | string | ✓ | Id toast for update |
options | object | ✘ | Options listed below |
Parameter | Type | Required | Description |
---|---|---|---|
message | string | ✓ | Message for toast |
options | object | ✘ | Options listed below |
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. |
$ npm install --save react-toasify-redux
$ yarn add react-toastify-redux
Import the reducer and pass it to your combineReducers:
import {combineReducers} from 'redux';
import {toastsReducer as toasts} from 'react-toasify-redux';
export default combineReducers({
// ...other reducers
toasts
});
Include the toast controller in main view:
import {ToastController} from 'react-toasify-redux';
export default () => {
return (
<div>
...
<ToastController />
</div>
);
};
Use actions for create, update and remove toasts:
import {dismiss, update, error, message, warning, success, info} from 'react-toastify-redux';
dispatch(dismiss(id));
dispatch(dismiss()); // dismiss all toasts
dispatch(update(id, options));
dispatch(message('Default message'));
dispatch(success('Success message'));
dispatch(error('Error message'));
dispatch(warning('Warning message'));
dispatch(info('Info message'));
Create toast component
export default ({ title, message }) => (
<div className='toast'>
<div className='header'>{title}</div>
<div className='message'>{message}</div>
</div>
);
Include this component in ToastConroller
import {ToastController} from 'react-toasify-redux';
import CustomToastComponent from 'awesome-folder/custom-toast-component';
export default () => {
return (
<div>
...
<ToastController toastComponent={CustomToastComponent} />
</div>
);
};
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 |
Parameter | Type | Required | Description |
---|---|---|---|
toast id | string | ✘ | Id toast for dismiss. If call action without id, then dismiss all toasts |
Parameter | Type | Required | Description |
---|---|---|---|
toast id | string | ✓ | Id toast for update |
options | object | ✘ | Options listed below |
Parameter | Type | Required | Description |
---|---|---|---|
message | string | ✓ | Message for toast |
options | object | ✘ | Options listed below |
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 |
Licensed under MIT
FAQs
react-toastify with Redux
The npm package react-toastify-redux receives a total of 242 weekly downloads. As such, react-toastify-redux popularity was classified as not popular.
We found that react-toastify-redux 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.