A lightweight toast notification JavaScript library (2.47kb)
Files
toastr.js
const toastr={setup:function(t,e,n){const s=$("<div/>",{id:"toastr-container"});t.append(s),e&&(toastr.variables.expiry=parseInt(e)),n&&(toastr.variables.delay=parseInt(n))},toast:function(t,e,n,s){toastr.events.queue.add(function(){const a=$("#toastr-container");if(!a.length)throw"toastr hasn't been initialized! Use toastr.setup('jQuery')";{const o=$("<div/>",{class:`toastr-toast${null!=e?" "+e:""}`}).append($("<span/>",{class:"toast-text",text:t}));if(o.on("click",function(){o.addClass("clicked"),toastr.events.expire(o,!0)}),n||s){if(n){const t=$("<span/>",{class:`toastr-button${n.class?" "+n.class:" "}`,text:n.text});t.on("click",function(){n.callback()}),o.append(t)}if(s){const t=$("<span/>",{class:`toastr-button${s.class?" "+s.class:" "}`,text:s.text});t.on("click",function(){s.callback()}),o.append(t)}}else toastr.events.expire(o);a.prepend(o),toastr.events.reposition(o)}})},events:{reposition:function(){const t=$(".toastr-toast");t.length;let e=0,n=0;t.each(function(n){e+=$(t[n]).outerHeight()}),t.each(function(e){const s=$(t[e]);s.css("bottom",n),n+=s.outerHeight()+10})},expire:function(t,e){function n(t){t.animate({left:`-${2*t.outerWidth()}`},{duration:1e3,complete:function(){t.remove(),toastr.events.reposition()}})}e?n(t):setTimeout(function(){n(t)},toastr.variables.expiry)},queue:{line:[],running:!1,add:function(t){toastr.events.queue.line.push(t),toastr.events.queue.run()},run:function(){if(!toastr.events.queue.running){toastr.events.queue.running=!0;var t=setInterval(function(){toastr.events.queue.line.length?(toastr.events.queue.line[0](),toastr.events.queue.line.shift()):(clearInterval(t),toastr.events.queue.running=!1)},toastr.variables.delay)}}}},variables:{expiry:5e3,delay:1e3}};
toastr.css
#toastr-container{position:fixed;bottom:0;left:0;margin:10px;height:100%;width:100%;overflow:hidden;pointer-events:none}.toastr-toast{margin:10px;padding:10px 20px;border-radius:5px;font-size:14px;opacity:1;position:fixed;bottom:-100vh;transition:bottom 1s ease-in-out;pointer-events:all;background-color:#2f2f2f;color:#efefef;width:max-content;max-width:500px}.toastr-toast .toastr-text{max-width:200px}.toastr-toast .warning,.toastr-toast.warning{background-color:orange;color:#efefef}.toastr-toast .danger,.toastr-toast.danger{background-color:red;color:#efefef}.toastr-toast .toastr-button:not(.warning,.danger){background-color:#2f2f2f;color:#efefef}.toastr-button{margin:0 5px;border:1px solid #fff;padding:5px 10px;border-radius:5px;text-transform:uppercase;font-size:.8em;display:inline-block}
Initialization
toastr.setup()
takes three arguments (bold = required):
- Element: Append Toastr to jQuery element (typically
$('body')
) - Expiry: How long a toast will display (default
5000
) - Delay: Time between bursts of toasts (default
1000
)
toastr.setup($('body'), 7500, 500);
Delay example
Using Toastr
Creating a toast
toastr.toast()
takes four arguments (bold = required):
- Message: A string to display in the toast
- Priority: This is an additional class to add to the toast of your choice. The Toastr css file provides support for
.danger
and.warning
- Button one: Object
- Button two: Object
Create basic toast
Buttons
Buttons can be used to chain toasts in a fashionable manner or display information only if the user requests.
The button object takes three parameters (bold = required):
- Text: A string to display in the button
- Class: A string to add a class to the button. The Toastr css file provides support for
.danger
and.warning
separate from the toast itself (false
ignores) - Callback: This can be used as a function to chain toasts or commit other functions depending on the users answer
Create chained toast
Example:
toastr.toast('Do you like goats?', false, {
text: 'Yes',
callback: function() {
toastr.toast('How much do you like goats?', false, {
text: 'Lots',
callback: function() {
toastr.toast('You like goats a lot!')
}
}, {
text: 'A little',
callback: function() {
toastr.toast('You like goats a little')
}
});
}
}, {
text: 'No',
class: 'danger',
callback: function() {
toastr.toast('You don\'t like goats');
}
})