Package Exports

react-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 (react-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-toastr

React.js toastr component

Installation

npm i --save react-toastr

Demo

Static hosted demo site on GitHub.

Example

Please refer to examples/gh-pages folder for example.

Usage

This module requires to be bundled with webpack/browserify and loads react/addons internally.
WIP: release a UMD version via bower/components.

Then:

var ReactToastr = require("react-toastr");
var {ToastContainer} = ReactToastr; // This is a React Element.
var ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.animation);

  // In a react component:
  render () {
    return (
      <div>
        <ToastContainer ref="container"
                        toastMessageFactory={ToastMessageFactory}
                        className="toast-top-right" />
        <button onClick={this.addAlert}>GGininder</button>
      </div>
    );
  }

Here's a list of React Elements:

ToastContainer

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

  addAlert () {
    this.refs.container.success(
      "Welcome welcome welcome!!",
      "You are now home my friend. Welcome home my friend.", {
      timeOut: 30000,
      extendedTimeOut: 10000
    });
    window.open("http://youtu.be/3SR75k7Oggg");
  }

or integrated with your flux architecture?

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

Options

Directly migrated from toastr.js library, and can be overrided via props in a React way:

ToastContainer::getDefaultProps

ToastMessage

Base class for holding a toast message, it will not animate in and out during it's lifecycle. Provides ToastMessage.animation and ToastMessage.jQuery for your choice.

Options

Directly migrated from toastr.js library, and can be overrided via props in a React way:

ToastMessage::getDefaultProps
ToastMessage.animation::getDefaultProps Credits go to @Janekk
ToastMessage.jQuery::getDefaultProps

Development

git clone ...
npm install
cd examples/gh-pages
npm install
npm start

Then open http://localhost:8080.

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request