react-toastr

React.js toastr component

Installation

npm i --save react-toastr

Demo

Static hosted demo site on GitHub. Check out the source in src/app.

Usage

This module requires bundling via webpack/browserify and loads react/addons internally.
You'll need to download animate.css from here: Animate @github

Styling links (CSS):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">

Example (within a React component or wrapper):

var ReactToastr = require("react-toastr");
var {ToastContainer} = ReactToastr; // This is a React Element.
// For Non ES6...
// var ToastContainer = ReactToastr.ToastContainer;

var ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.animation);
...
  addAlert () {
    this.container.success(
      "my-title",
      "my-fascinating-toast-message", {
      timeOut: 5000,
      extendedTimeOut: 3000
    });
  }
  
  render () {
    return (
      <div>
        <ToastContainer ref={(input) => {this.container = input;}}
                        toastMessageFactory={ToastMessageFactory}
                        className="toast-top-right"
                        preventDuplicates="true" />
        <button onClick={this.addAlert}>Add Toast</button>
      </div>
    );
  }

Integrated with your flux architecture:

  componentDidMount: function() {
    InInDerStore.addChangeListener(this.addAlert);
  }

ToastContainer

This is the container where all ToastMessage elements will go. Use it by retaining a ref to publish a new ToastMessage:

  addAlert () {
    this.container.success(
      "my-title",
      "my-fascinating-toast-message", {
      timeOut: 5000,
      extendedTimeOut: 3000
    });
  }

Options

Directly migrated from toastr.js library. Set these as props on ToastContainer to override the defaults.

• ToastContainer::getDefaultProps

Prevent Duplicates

Prevent identical toast messages from displaying.

  preventDuplicates: true

Newest on Top

Display new toast messages at the top or bottom of the queue.

  newestOnTop: true

Displaying HTML

To display HTML, simply pass JSX instead of strings for title and message arguments:

this.container.success(
  <strong>I am a strong title</strong>,
  <em>I am an emphasized message</em>
});

ToastMessage

Base class for holding a toast message.

Options

Directly migrated from toastr.js library. Set these as props on ToastMessage to override the defaults.

• ToastMessage::getDefaultProps

Close Button

Show or hide an optional close button.

  closeButton: false

Tap to Dismiss

Enable dismissing toasts on click.

  tapToDismiss: true

Animation

For animation, choose between ToastMessage.animation or ToastMessage.jQuery.

  var ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.animation);
  //or...
  var ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.jQuery);

Options

• ToastMessage.animation::getDefaultProps (Credits go to @Janekk)
• ToastMessage.jQuery::getDefaultProps

Time Out

Set the time (in ms) after which the toast message should automatically close.

  timeOut: 5000

Extended Time Out

Set the time (in ms) after which the toast message should automatically close after being hovered on. Applied on hover exit.

  extendedTimeOut: 3000