Skip to content

Latest commit

 

History

History
131 lines (108 loc) · 5.12 KB

README.md

File metadata and controls

131 lines (108 loc) · 5.12 KB

React Toastify Redux Build Status npm version npm Coverage Status

Wraps react-toastify into a component and exposes actions and reducer.

Installation

$ npm install --save react-toastify-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-toastify-redux';

export default combineReducers({
    // ...other reducers
    toasts
});

Include the toast controller in main view:

import {ToastController} from 'react-toastify-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 ({ header, message }) => (
    <div className='toast'>
        <div className='header'>{header}</div>
        <div className='message'>{message}</div>
    </div>
);

Include this component in ToastConroller

import {ToastController} from 'react-toastify-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

Toast Actions (Message, Success, Info, Warning, Error)

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' Toast type
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 - An optional css class to set for the toast content.
progressClassName string or object - An optional css class to set for the progress bar.
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