React.js toastr component
npm i --save react-toastr
Static hosted demo site on GitHub.
Please refer to examples/gh-pages folder for example.
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:
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);
}
Directly migrated from toastr.js
library, and can be overrided via props
in a React way:
ToastContainer::getDefaultProps
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.
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
git clone ...
npm install
cd examples/gh-pages
npm install
npm start
Then open http://localhost:8080.
- 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