A tiny, lightweight, Javascript modular library to show different types of notifications and toasts. Works well with webpack, and also supports TypeScript, Angular, React and Vue. The library is available as an npm package. To install the package run:
npm install notifr --save
# or with yarn
yarn add notifr
Check this Demo.
import { notifSuccess, notifHide } from 'notifr';
// Show Notification Bar
notifSuccess("Success Message");
// Hide Notification Bar
notifHide();
import { notifError, notifHide } from 'notifr';
// Show Notification Bar
notifError("Error Message");
// Hide Notification Bar
notifHide();
import { notifCustom, notifHide } from 'notifr';
// Show Notification Bar
notifCustom("Custom Message", {color: "white", bgColor: "orange", bold: false});
// Hide Notification Bar
notifHide();
import { notifSuccess } from 'notifr';
notifSuccess("Success Message").til(1000); // 1000 milliseconds
import { notifSuccess } from 'notifr';
notifSuccess("Error Message",{}, false).til(1000); // 1000 milliseconds
import { notifCustom } from 'notifr';
notifCustom("Custom Message", {
color: '#FFFF99', // default '#FFFFFF'
bgColor: '#CCFFFF', // default '#999999'
bold: true, // default false
noShadow: true, // default false
});
import { toastSuccess, toastError, toastCustom } from 'notifr';
// Show Success Toast
toastSuccess("Success Message");
// Show Error Toast
toastError("Error Message");
// Show Custom Toast
toastCustom("Custom Message", {color: "white", bgColor: "orange", bold: false});
// Note: Default Time for toast is 2 seconds (2000ms), you can change by passing third optional time parameter in milliseconds.
toastSuccess("Success Message", { bold: true }, 5000);
Note: All the methods except notifHide() support optional parameters.
If you like this package, please give it a star on GitHub. Also please feel free to create a GitHub issue to help me improve this package.