react-toastr-redux
React.js toastr component
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..
WIP: release a UMD version via bower/components.
Then:
var ReactToastr = ;var ToastContainer = ReactToastr; // This is a React Element.// For Non ES6...// var ToastContainer = ReactToastr.ToastContainer;var ToastMessageFactory = React; // In a react component: { return <div> <ToastContainer ref="container" toastMessageFactory=ToastMessageFactory className="toast-top-right" /> <button onClick=thisaddAlert>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:
{ thisrefscontainer; window; }
or integrated with your flux architecture?
{ InInDerStore; }
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 @JanekkToastMessage.jQuery::getDefaultProps
Development
git clone ...npm installcd examples/gh-pagesnpm installnpm 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