React Toastify Redux Build Status npm version npm Coverage Status
Wraps react-toastify into a component and exposes actions and reducer.
$ npm install --save react-toastify-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-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> ); };
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 ({ 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> ); };
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 |
- Available options :
- See: Toast Base Options
- message: toast message for update
| 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.
| 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 |
Licensed under MIT