JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
JavaScript
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-bottom-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "60000",
"extendedTimeOut": "60000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
class Notifier {
constructor(opt) {
this.dflt = {
info: {
"closeButton": false
},
success: {
"progressBar": true
},
warning: {
},
error: {
}
}
this.cfg = _.defaults(opt, this.dflt);
}
info(msg, tl, cfgOvr) {
this.notify('info', msg, tl, cfgOvr);
}
success(msg, tl, cfgOvr) {
this.notify('success', msg, tl, cfgOvr);
}
warning(msg, tl, cfgOvr) {
this.notify('warning', msg, tl, cfgOvr);
}
error(msg, tl, cfgOvr) {
this.notify('error', msg, tl, cfgOvr);
}
notify(lvl, msg, tl, cfgOvr) {
let cfg = this.cfg[lvl];
if (cfgOvr) {
cfg = _.defaults(cfgOvr, cfg);
}
window.toastr[lvl](msg, tl, cfg);
}
}
const notifier = new Notifier();
notifier.info('a', 'b');