react-redux-toastr demo

!react-redux-toastr


react-redux-toastr is a React toastr message implemented with Redux, primary consists of three things: a reducer, toastr emitter and a React component.

The reducer listens to dispatched actions from the component to maintain the toastr state in Redux.

Implementation Guide

##### 1. Installation

npm install --save react-redux-toastr

##### 2. Add the styles

- import the scss file into to your project.

``scss
@import 'react-redux-toastr/src/styles/index';
`
- or import the css file.

`javascript
import 'react-redux-toastr/lib/css/react-redux-toastr.min.css'
`
- or include the css file from the demo site (NOTE: This can be change at anytime)
`html

`

##### 3. Add the reducer.

`javascript
import {createStore, combineReducers} from 'redux'
import {reducer as toastrReducer} from 'react-redux-toastr'
const reducers = {
// ... other reducers ...
toastr: toastrReducer // <- Mounted at toastr.
}
const reducer = combineReducers(reducers)
const store = createStore(reducer)
`

NOTE: The default mount point for react-redux-toastr is toastr.

##### 4. Add the component into an app root

`javascript
import {Provider} from 'react-redux'
import ReduxToastr from 'react-redux-toastr'

... other things like router ...
// props are not required
timeOut={4000}
newestOnTop={false}
preventDuplicates
position="top-left"
transitionIn="fadeIn"
transitionOut="fadeOut"
progressBar
closeOnToastrClick/>

`

The default configuration is:
`js
{
timeOut: 5000,
newestOnTop: true,
position: 'top-right',
transitionIn: 'bounceIn',
transitionOut: 'bounceOut',
progressBar: false,
closeOnToastrClick: false,
}
`

NOTE: transitionIn and transitionOut will affect the confirm animation as well

Here is the full list of available configurations:

- position: top-left top-center top-right bottom-left bottom-center and bottom-right

- transitionIn: bounceIn bounceInDown and fadeIn

- transitionOut: bounceOut bounceOutUp and fadeOut

##### 5. Use the emitter
The toastr method use eventemitter3 to dispatch the actions


`javascript
import React, {Component} from 'react'
import {toastr} from 'react-redux-toastr'

export class YourComponent extends Component {
render() {
return (

onClick={() => toastr.success('The title', 'The message')}
type="button">Toastr Success

)
}
}
`
Or you can bind the actions to your component if you prefer.

`javascript
import {bindActionCreators} from 'redux'
import {actions as toastrActions} from 'react-redux-toastr'
// In your React component
constructor(props) {
super(props);
// Bind the react-redux-toastr actions to the component
this.toastr = bindActionCreators(toastrActions, this.props.dispatch)

this.toastr.add({
id: 'mycustomid', // If not provided we will add one.
type: 'success',
title: 'your title',
position: 'top-left', // This will override the global props position.
attention: true, // This will add a shadow like the confirm method.
onAttentionClick: (id) => {}, //override default behavior of 'attention' background click.
message: 'message',
options: {}
});

this.toastr.remove('toastrId');
}
`

Toastr methods

Toastr accepts the following methods: success info warning light error confirm message, remove and removeByType

##### Toastr: success info warning light error remove and removeByType
Each of these methods can take up to three arguments the title a message and options.
In options you can specify timeOut icon onShowComplete onHideComplete className component removeOnHover,removeOnHoverTimeOut,showCloseButton, onCloseButtonClick, onToastrClick, progressBar, transitionIn, position, attention, onAttentionClick, transitionOut and closeOnToastrClick.

` javascript
import {toastr} from 'react-redux-toastr'

const toastrOptions = {
timeOut: 3000, // by setting to 0 it will prevent the auto close
icon: (), // You can add any component you want but note that the width and height are 70px ;)
onShowComplete: () => console.log('SHOW: animation is done'),
onHideComplete: () => console.log('HIDE: animation is done'),
onCloseButtonClick: () => console.log('Close button was clicked'),
onToastrClick: () => console.log('Toastr was clicked'),
showCloseButton: false, // true by default
closeOnToastrClick: true, // false by default, this will close the toastr when user clicks on it
component: ( // this option will give you a func 'remove' as props

Hello, World!

)
}

toastr.success('Title', 'Message', toastrOptions)
toastr.info('The message', toastrOptions)
toastr.warning('The title', 'The message')
toastr.error('The message')
toastr.removeByType('error') // Remove all toastrs with the type error.
toastr.remove('123') // Removes toastr with id '123'
`

##### Toastr methods light

The light method is like the other toastr except that the background-color is white and you can add a top
border on top of the toastr by passing the status option

icon can be one of the following:
- 'success'
- 'info'
- 'warning'
- 'error'

` javascript
import {toastr} from 'react-redux-toastr'

const toastrType = 'warning';
const toastrOptions = {
icon: toastrType,
status: toastrType
}

toastr.light('The title', 'The message', toastrOptions)
`

##### Toastr: message
This one is in case you wanna show a large amount of information, unlike the other methods above this will not close automatically unless you provide a timeout in the message options.

`javascript
const toastrMessageOptions = {
timeOut: 3000, // Default value is 0
onShowComplete: () => console.log('SHOW: animation is done'),
onHideComplete: () => console.log('HIDE: animation is done'),
removeOnHover: false, // Default value is false
removeOnHoverTimeOut: 1000, // Default value is 1000
component: React.Component
};
toastr.message('Title', toastrMessageOptions)
`

##### Toastr: confirm
The confirm method takes two arguments, the first is the message the second is a object where you can specify what will happen when the user clicks on ok and cancel button or by keypress enter/esc

NOTE: You can only have one at a time, right now if you have one confirm and you fire another it will be ignored.

`javascript
const toastrConfirmOptions = {
onOk: () => console.log('OK: clicked'),
onCancel: () => console.log('CANCEL: clicked')
};
toastr.confirm('Are you sure about that!', toastrConfirmOptions);
`

You can change the ok and cancel text by:

- Passing the confirm props to the ReduxToastr component

`javascript

const options = {
okText: 'confirm text',
cancelText: 'cancel text'
};

`

- Passing the okText and cancelText props to the toasterConfirmOptions object:

`javascript
const toastrConfirmOptions = {
...
okText: 'confirm text',
cancelText: 'cancel text'
};

toastr.confirm('Are you sure about that!', toastrConfirmOptions);
`

You can make it so ok is the only button by:

- Passing the disableCancel prop to the toasterConfirmOptions object:

`javascript
const toastrConfirmOptions = {
...
disableCancel: true;
};

toastr.confirm('You have timed out! Please log back in.', toastrConfirmOptions);
`

You can add custom buttons by:

- Passing the buttons prop to the toasterConfirmOptions object.
The buttons are inserted after the OK and the cancel button.

Each button config can have a text, handler and a className property.

If you want to move the original OK or cancel button to a different place, just
insert a button config with a boolean flag ok or cancel at the desired position
(note that all other properties are ignored in this button config).

The following config leads to 3 buttons in this order:
1. "Apply" (original OK button)
2. "Do not apply" (our custom button)
3. "Cancel" (original cancel button)

`javascript
const toastrConfirmOptions = {
...
okText: 'Apply',
buttons: [{
text: 'Do not apply',
className: 'do-not-apply-btn',
handler: () => console.log('do-not-apply clicked')
}, {
cancel: true // move the cancel button to the end
}]
};

toastr.confirm('Your changes are applicable to 5 more records.', toastrConfirmOptions);
`

You can render your custom message component instead of the simple string message by:

- Passing the component prop to the toasterConfirmOptions object:

`javascript
const toastrConfirmOptions = {
...
component: () => (

Hello, World!

)
};

toastr.confirm(null, toastrConfirmOptions); // pass null for message
`

$3

Avatar

Run a local demo

`
git clone https://github.com/diegoddox/react-redux-toastr.git
cd react-redux-toastr
npm install
npm start
`
open your browser at http://localhost:3000`

License

MIT. Copyright (c) 2016 Diego Oliveira.