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