Notification.js is a standalone ES6 module that lets you easily handle multiple notifications of different types at the same time. It features a lot of options so you can customize it.
How to make use of it:
1. Load the mandatory stylesheet notification.min.css within the doc.
<link rel="stylesheet" href="./dist/notification.min.css" />
2. Import Notification.js.
import Notification from './src/Notification.js';
3. Initialize the Notification.js with default configs.
window.notification = new Notification();
4. Send customized notification messages to customers.
notification.success({ message: 'Success notification' }); notification.info({ message: 'Info notification' }); notification.warning({ message: 'Warning notification' }); notification.error({ message: 'Error notification' });
5. Customize the notification.
window.notification = new Notification({ // top-left, top-right, bottom-left, or bottom-right position: 'top-right', // left, right, top, bottom, or none thickBorder: 'top', // auto dimiss after 5000ms duration: 5000, // transition speed transition: 200, // max number of notifications maxActive: 10, // path to images imgPath: './img/' });
6. You may create notification situations and customize the notification message as follows:
let instance = window.notification.new({ // success, info, warning, or error type: 'info', // title title: '', // message message: 'Lorem ipsum dolor sit amet.', // auto dismiss after this timeout duration: 5000, // hide icons iconless: false, // left, right, top, bottom, or none thickBorder: 'top', // is closable closable: true, // is always visible sticky: false, // where you want to place the notifications renderTo: document.body, // callback title CBtitle: 'My callback', // callback callback: function() { alert('Called from my notification'); } });
7. Dismiss all activate notifications.
window.notification.dismissAll();
Notification options
Handler settings
Options | Default | Values |
---|---|---|
position | top-right | top-left , top-right , bottom-left , bottom-right |
thickBorder | top | left , right , top , bottom , none |
duration | 5000 ms | Positive integer |
transition | 200 ms | A positive integer, not greater than the half duration |
maxActive | 5 | Positive integer |
Notification settings
Option | Default | Values |
---|---|---|
type | info | success , info , warning , error |
title | '' | String |
message | '' | String with a length greater than 0 |
thickBorder | Handler value | left , right , top , bottom , none |
iconless | false | true , false |
closable | true | true , false |
sticky | false | true , false |
renderTo | Handler container | DOM Object |
CBtitle | '' | String |
callback | null | JavaScript function |
Client-side Non-Blocking Notification Library, Notification JS Plugin/Github
See Demo And Download
Official Website(ArthurBeaulieu): Click Here
This superior jQuery/javascript plugin is developed by ArthurBeaulieu. For extra Advanced usage, please go to the official website.