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

Notification settings

Client-side Non-Blocking Notification Library, Notification JS Plugin/Github

See Demo And Download