A Free and Light Notification handler Library | Notification.js

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

OptionsDefaultValues
positiontop-righttop-lefttop-rightbottom-leftbottom-right
thickBordertopleftrighttopbottomnone
duration5000 msPositive integer
transition200 msA positive integer, not greater than the half duration
maxActive5Positive integer

Notification settings

OptionDefaultValues
typeinfosuccessinfowarningerror
title''String
message''String with a length greater than 0
thickBorderHandler valueleftrighttopbottomnone
iconlessfalsetruefalse
closabletruetruefalse
stickyfalsetruefalse
renderToHandler containerDOM Object
CBtitle''String
callbacknullJavaScript 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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…