Customizable Push Notification Library For The Web – Notifier.js

Category: Javascript , Notification | February 17, 2020
Author: jsanahuja
Views Total: 96
Official Page: Go to website
Last Update: February 17, 2020
License: MIT

Preview:

Customizable Push Notification Library For The Web – Notifier.js

Description:

Notifier.js is an easy yet fully configurable push notification library to show toast and growl style messages in the bottom right corner of the page.

More Features:

  • Allows you to attach the notifications to any container.
  • 4 built-in themes: Success, Error, Warning, Info.
  • Auto dismisses with a countdown bar.
  • Allows you to create your own themes (styles).

How to use it:

1. Download & unzip the library and then load the minified version of the Notifier.js in the HTML file.

<link href="dist/Notifier.min.css" rel="stylesheet" />
<script src="dist/Notifier.min.js"></script>

2. Initialize the Norifier.js and we’re ready to go.

var notifier = new Notifier();

3. Create push notifications using built-in themes.

// Success
var notification = notifier.notify("success", "<b>Success</b> Message");
notification.push();

// Info
var notification = notifier.notify("info", "<b>Info</b> Message");
notification.push();

// Warning
var notification = notifier.notify("warning", "<b>Warning</b> Message");
notification.push();

// Error
var notification = notifier.notify("error", "<b>Error</b> Message");
notification.push();

4. Create your own notification types (themes).

var notifier = new Notifier({
    "custom": {
      "classes": "my-class",
      "icon": "icon here"
    }
});
notification = notifier.notify("custom", "<b>Custom</b> Message");
notification.push();
.notifyjs-container .notifyjs-notification.my-class {
  /* CSS Styles Here */
}

.notifyjs-container .notifyjs-notification.my-class p.progress {
  /* CSS Styles Here */
}

.notifyjs-container .notifyjs-notification.my-class.notifyjs-icon {
  /* CSS Styles Here */
}

5. Attach the notifications to a specified container. Default: the whole body.

var notifier = new Notifier({
    container: null
});

6. Specify the timeout. Default: 4500ms.

var notifier = new Notifier({
    default_time: 5000
});

7. Config the animation.

var notifier = new Notifier({
    vanish_time: 300,
    fps: 30
});

8. Dismiss all notifications.

notification.clear();

9. Destroy the library.

notification.destroy();

You Might Be Interested In:


Leave a Reply