Lightweight JavaScript Notification Message Box Library Plugin

Awesome Notification is a lightweight and fully customizable JavaScript notification library with improved asynchronous support.

awesome notifications, js notification library, jquery notification popup, notifications library, js notification popup, jquery notification bubble, jquery notification message box

Features:

Modal style notifications.
Toast style notifications.
Supports HTML content.
Confirmation and alert dialogs.
Auto rejects after a certain timeout.
Countdown progress bar.
Font Awesome-based icons.
Information/Success/Warning/Alert topics.
Asynchronous support.

How to make use of it:

Install and import:

# NPM
$ npm install awesome-notifications --save

// ES 6
import AWN from 'awesome-notifications';

// CommonJS:
const AWN = require('awesome-notifications');

For the browser, including the Font Awesome and Awesome Notifications stylesheet in the header section of the page.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="dist/style.css" rel="stylesheet">

Include Awesome Notifications JavaScript on the page when needed.

<script src="dist/index.var.js"></script>

Configure the Awesome Notifications library with the default options.

var notifier = new AWN();

Create notification popups using the following JavaScript syntax.

// basic 
notifier.tip('Message here');

// info message
notifier.info('Message here');

// success message
notifier.success('Message here');

// warning message
notifier.warning('Message here');

// alert messages
notifier.alert('Message here');

// confirm dialog
notifier.confirm('Are you sure?', okFunc, cancelFunc);

// modal window with custom css class
notifier.modal('<h2>Your custom title</h2><p>Your custom text</p>', 'custom-class-name')

// async toast
notifier.async(promise, onResolve, onReject, html)

// shows loader and blocks the screen
notifier.asyncBlock(promise, onResolve, onReject, html)

Default options for customizing the notification popup.

maxNotifications: 10,
animationDuration: 300,
position: "bottom-right",
labels: {
  tip: "Tip",
  info: "Info",
  success: "Success",
  warning: "Attention",
  alert: "Error",
  async: "Loading",
  confirm: "Confirmation required",
  confirmOk: "OK",
  confirmCancel: "Cancel"
},
icons: {
  tip: "question-circle",
  info: "info-circle",
  success: "check-circle",
  warning: "exclamation-circle",
  alert: "exclamation-triangle",
  async: "cog fa-spin",
  confirm: "exclamation-triangle",
  prefix: "<i class='fa fas fa-fw fa-",
  suffix: "'></i>",
  enabled: true
},
replacements: {
  tip: null,
  info: null,
  success: null,
  warning: null,
  alert: null,
  async: null,
  "async-block": null,
  modal: null,
  confirm: null,
  general: {
    "<script>": "",
    "</script>": ""
  }
},
messages: {
  tip: "",
  info: "",
  success: "Action has been succeeded",
  warning: "",
  alert: "Action has been failed",
  confirm: "This action can't be undone. Continue?",
  async: "Please, wait...",
  "async-block": "Loading"
},
formatError(err) {
  if (err.response) {
    if (!err.response.data) return '500 API Server Error'
    if (err.response.data.errors) {
      return err.response.data.errors.map(o => o.detail).join('<br>')
    }
    if (err.response.statusText) {
      return `${err.response.status} ${err.response.statusText}: ${err.response.data}`
    }
  }
  if (err.message) return err.message
  return err
},
durations: {
  global: 5000,
  success: null,
  info: null,
  tip: null,
  warning: null,
  alert: null
},
minDurations: {
  async: 1000,
  "async-block": 1000
},

Customizable Notification Popup Library For JavaScript, Awesome Notifications Plugin/Github, jquery notification library