Client-side Non-Blocking Notification Library – Notification.js

Preview:

Description:

An open-source JavaScript (ES 6) notification library to display customizable, toast-like, non-blocking, crossfading notification popups with different types on the screen.

How to use it:

1. Load the necessary stylesheet notification.min.css in the document.

<link rel="stylesheet" href="./dist/notification.min.css" />

2. Import the Notification.js.

import Notification from './src/Notification.js';

3. Initialize the Notification.js with default configs.

window.notification = new Notification();

4. Send custom notification messages to users.

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 can also create notification instances 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();