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

Category: Javascript , Notification | October 16, 2020
Author:ArthurBeaulieu
Views Total:96 views
Official Page:Go to website
Last Update:October 16, 2020
License:MIT

Preview:

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

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();

You Might Be Interested In:


Leave a Reply