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