Package Exports

@lagun4ik/react-redux-toastr

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lagun4ik/react-redux-toastr) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

##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.

@import 'react-redux-toastr/src/styles/index';

or include the css file from the demo site (NOTE: This can be change at anytime)

<link href="http://diegoddox.github.io/react-redux-toastr/5.0/react-redux-toastr.min.css" rel="stylesheet" type="text/css">

3. Add the reducer.

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

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

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

The default configuration is:

{
  timeOut: 5000,
  newestOnTop: true,
  position: 'top-right',
  transitionIn: 'bounceIn',
  transitionOut: 'bounceOut',
  progressBar: 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

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

export class YourComponent extends Component {
  render() {
    return (
      <div>
        <button
          onClick={() => toastr.success('The title', 'The message')}
          type="button">Toastr Success</button>
      </div>
    )
  }
}

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

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.
   message: 'message',
   options: {}
  });

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

Toastr methods

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

Toastr: `success` `info` `warning` `light` `error` 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, showCloseButton, onCloseButtonClick, progressBar, transitionIn, position, attention and transitionOut.

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

const toastrOptions = {
  timeOut: 3000, // by setting to 0 it will prevent the auto close
  icon: (<myCustomIconOrAvatar />), // You can add any component you want but note the the with 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'),
  showCloseButton: false, // true by default
  component: ( // this option will give you a func 'remove' as props
    <MyCustomComponent myProp="myValue">
      <span>Hello, World!</span>
    </MyCustomComponent>
  )
}

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

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.

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
  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.

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

<!-- please define both keys as this will override default okText & cancelText -->
const options = {
  okText: 'confirm text',
  cancelText: 'cancel text'
};
<ReduxToastr confirmOptions={options}/>

Passing the okText and cancelText props to the toasterConfirmOptions object:

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:

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

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

You can add the note text

Passing the enableNote props to the toasterConfirmOptions object
Passing the requiredNote, notePlaceholder, noteLabel, onChangeNote props to the toasterConfirmOptions object for fine tuning

const toastrConfirmOptions = {
  ...
  enableNote: true,
  requiredNote: true,
  notePlaceholder: 'John',
  noteLabel: 'What is your name?',
  onChangeNote: console.log,
  onOk: ({ note }) => console.log(`OK: clicked (${note})`),
  onCancel: ({ note }) => console.log(`CANCEL: clicked (${note})`)
};

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

Avatar: in case you wanna use the same avatar as the example

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

TODO

create test.

@lagun4ik/react-redux-toastr