notifr v1.0.0
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 notifrDemo
Check this Demo.
How to Use?
1. Show & Hide Success Bar
import { notifSuccess, notifHide } from 'notifr';
// Show Notification Bar
notifSuccess("Success Message");
// Hide Notification Bar
notifHide();2. Show & Hide Error Bar
import { notifError, notifHide } from 'notifr';
// Show Notification Bar
notifError("Error Message");
// Hide Notification Bar
notifHide();3. Show & Hide Custom Bar
import { notifCustom, notifHide } from 'notifr';
// Show Notification Bar
notifCustom("Custom Message", {color: "white", bgColor: "orange", bold: false});
// Hide Notification Bar
notifHide();4. Show Notification for a given time.
import { notifSuccess } from 'notifr';
notifSuccess("Success Message").til(1000); // 1000 milliseconds5. Show Notification Without Close Button.
import { notifSuccess } from 'notifr';
notifSuccess("Error Message",{}, false).til(1000); // 1000 milliseconds6. With Optional Parameters:
import { notifCustom } from 'notifr';
notifCustom("Custom Message", {
color: '#FFFF99', // default '#FFFFFF'
bgColor: '#CCFFFF', // default '#999999'
bold: true, // default false
noShadow: true, // default false
});Show & Hide Toasts
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.
Please Support :)
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.
