npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@newhippo/react-redux-toastr

v7.4.6

Published

react-redux-toastr is a React toastr message implemented with Redux

Downloads

5

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 import the css file.

import 'react-redux-toastr/lib/css/react-redux-toastr.min.css'
  • or include the css file from the demo site (NOTE: This file can be changed anytime)
<link href="https://diegoddox.github.io/react-redux-toastr/7.1/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
      closeOnToastrClick/>
  </div>
</Provider>

The default configuration is:

{
  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

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

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 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
    <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.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'
import {toastr} from 'react-redux-toastr'

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

toastr.light('The title', 'The message', toastrOptions)
Toastr: message

Use this one if you wanna show a large amount of information. Unlike the other methods above, it would 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
  removeOnHoverTimeOut: 1000, // Default value is 1000
  component: React.Component
};
toastr.message('Title', toastrMessageOptions)
Toastr: confirm

The confirm method takes two arguments. The first one is the message and the second one is an object where you can specify what will happen when the user clicks on ok or on the cancel buttons or on keypress enter/esc.

NOTE: You can only have one confirm toastr at the same time. 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 texts by:

  • Passing confirmOptions 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 okText and cancelText in 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 disableCancel in the toasterConfirmOptions object:
const toastrConfirmOptions = {
  ...
  disableCancel: true
};

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

You can add custom buttons by:

  • Passing buttons in the toasterConfirmOptions object.

    The buttons are inserted after the OK and the cancel buttons.

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

    If you want to move the original OK or cancel buttons to a different postiion, just insert a an object with a single boolean flag: ok or cancel to the desired position inside buttons. (note that all other properties are ignored in this case).

The following config leads to 3 buttons in the following order:

  1. "Apply" (original OK button)
  2. "Do not apply" (our custom button)
  3. "Cancel" (original cancel button)
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:
const toastrConfirmOptions = {
  ...
  component: () => (
    <MyCustomComponent myProp="myValue">
      <span>Hello, World!</span>
    </MyCustomComponent>
  )
};

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

Avatar: in case you wanna use the same avatar as in 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

License

MIT. Copyright (c) 2016 Diego Oliveira.