React.js toastr component
npm i --save react-toastr
Static hosted demo site on GitHub. Check out the source in src/app.
This module requires bundling via webpack/browserify and loads react/addons
internally.
You'll need to download animate.css from here: Animate @github
<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">
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);
}
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
});
}
Directly migrated from toastr.js
library. Set these as props on ToastContainer to override the defaults.
Prevent identical toast messages from displaying.
preventDuplicates: true
Display new toast messages at the top or bottom of the queue.
newestOnTop: true
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>
});
Base class for holding a toast message.
Directly migrated from toastr.js
library. Set these as props on ToastMessage to override the defaults.
Show or hide an optional close button.
closeButton: false
Enable dismissing toasts on click.
tapToDismiss: true
For animation, choose between ToastMessage.animation
or ToastMessage.jQuery
.
var ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.animation);
//or...
var ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.jQuery);
ToastMessage.animation::getDefaultProps
(Credits go to @Janekk)ToastMessage.jQuery::getDefaultProps
Set the time (in ms) after which the toast message should automatically close.
timeOut: 5000
Set the time (in ms) after which the toast message should automatically close after being hovered on. Applied on hover exit.
extendedTimeOut: 3000