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:

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>
    );
};

Actions

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'));

Customization toast

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>
    );
};

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:

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>
    );
};

Actions

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'));

Customization toast

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>
    );
};

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