Pretty Nice Notification Library – Naranja

Naranja is a vanilla JavaScript notification plugin used for creating configurable, non-blocking, good-looking notification popups similar to the desktop notification.

Currently comes with 4 notifications types: log, warning, success, and error.

How to use it:

Import the following JavaScript and CSS files into the document.

<script src="/lib/naranja.min.js"></script>
<link rel="stylesheet" href="/lib/naranja.min.css">

The JavaScript syntax.

naranja().log();
naranja().success();
naranja().warn();
naranja().error();

Add title, message text and icon to the notification.

naranja().log({
  // required
  title: 'Notification Title',
  // required
  text: 'Notificaiton Message', 
  // shows icon or not
  icon: true
  
})

Decide whether to close the notification after x seconds.

naranja().log({
  // required
  title: 'Notification Title',
  // required
  text: 'Notificaiton Message', 
  // auto close after 3 seconds
  // or 'keep'
  timeout: 3000 or 'keep'
})

Add custom action buttons to the notification. Useful confirmation popup.

naranja().log({
  // required
  title: 'Notification Title',
  // required
  text: 'Notificaiton Message', 
  buttons: [
    {
      text: 'OK',
      click: function (e) {
        e.preventClose()
        e.closeNotification()
      }
    },
    {
      text: 'Cancel',
      click: function () {
        // do something
      }
    }
  ]
  
})