react-toastr-redux

    0.3.0 • Public • Published

    react-toastr-redux Travis CI Quality Coverage Dependencies Gitter

    React.js toastr component

    Version Travis CI Quality Coverage Dependencies Gitter

    Installation

    npm i --save react-toastr-redux

    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.
    You'll need to download animate.css from here Animate @github

    Link to css/js properly..

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <link rel="stylesheet" href="/static/dist/css/animate.css">
     
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

    WIP: release a UMD version via bower/components.

    Then:

    var ReactToastr = require("react-toastr-redux");
    var {ToastContainer} = ReactToastr; // This is a React Element.
    // For Non ES6...
    // var ToastContainer = ReactToastr.ToastContainer;
    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:

    Development

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

    Then open http://localhost:8080.

    Contributing

    devDependency Status

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

    Install

    npm i react-toastr-redux

    DownloadsWeekly Downloads

    6

    Version

    0.3.0

    License

    MIT

    Last publish

    Collaborators

    • avatar