Customizable Push Notification Library For The Web – Notifier.js

Category: Javascript , Notification | August 29, 2020
Author:jsanahuja
Views Total:274 views
Official Page:Go to website
Last Update:August 29, 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. Determine whether or not to auto push the notification. Default: true.

var notifier = new Notifier({
    autopush: false
});

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. Determine the position & direction.

var notifier = new Notifier({
    // top-left, top-right, bottom-left and bottom-right
    position: 'bottom-right',
    // top, or bottom
    direction: 'bottom',
});

9. Customize the CSS z-index property.

var notifier = new Notifier({
    zindex: 9999
});

10. Override the default styles of the notification.

var notifier = new Notifier({
    success: {
        classes: 'notifyjs-success',
        textColor: "#155724",
        borderColor: "#c3e6cb",
        backgroundColor: "#d4edda",
        progressColor: "#155724",
        iconColor: "#155724",
        // iconClasses: "",
        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path d="M6.41 0l-.69.72-2.78 2.78-.81-.78-.72-.72-1.41 1.41.72.72 1.5 1.5.69.72.72-.72 3.5-3.5.72-.72-1.44-1.41z" transform="translate(0 1)" /></svg>'
    },
    error: {
        classes: 'notifyjs-danger',
        textColor: "#721c24",
        borderColor: "#f5c6cb",
        backgroundColor: "#f8d7da",
        progressColor: "#721c24",
        iconColor: "#721c24",
        // iconClasses: "",
        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" /></svg>'
    },
    warning: {
        classes: 'notifyjs-warning',
        textColor: "#856404",
        borderColor: "#fff3cd",
        backgroundColor: "#ffeeba",
        progressColor: "#856404",
        iconColor: "#856404",
        // iconClasses: "",
        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path d="M3.09 0c-.06 0-.1.04-.13.09l-2.94 6.81c-.02.05-.03.13-.03.19v.81c0 .05.04.09.09.09h6.81c.05 0 .09-.04.09-.09v-.81c0-.05-.01-.14-.03-.19l-2.94-6.81c-.02-.05-.07-.09-.13-.09h-.81zm-.09 3h1v2h-1v-2zm0 3h1v1h-1v-1z" /></svg>'
    },
    info: {
        classes: 'notifyjs-info',
        textColor: "#0c5460",
        borderColor: "#d1ecf1",
        backgroundColor: "#bee5eb",
        progressColor: "#0c5460",
        iconColor: "#0c5460",
        // iconClasses: "",
        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path d="M3 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-1.5 2.5c-.83 0-1.5.67-1.5 1.5h1c0-.28.22-.5.5-.5s.5.22.5.5-1 1.64-1 2.5c0 .86.67 1.5 1.5 1.5s1.5-.67 1.5-1.5h-1c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-.36 1-1.84 1-2.5 0-.81-.67-1.5-1.5-1.5z" transform="translate(2)"/></svg>'
    }
});

11. Dismiss all notifications.

notification.clear();

12. Destroy the library.

notification.destroy();

Changelog:

v1.2.4 (08/29/2020)

  • Fixed type classes was not being applied

v1.2.2 (05/02/2020)

  • Added z-index option

You Might Be Interested In:


2 thoughts on “Customizable Push Notification Library For The Web – Notifier.js

  1. jkm-droid

    i could not locate the Notifier.min.css file in the dist folder, followed everything but nothing seems to work

    Reply
    1. CSS Script Post author

      It seems that the package has removed the stylesheet. However, you can add your own styles to the notifications as you’ve seen on the demo page.

      Reply

Leave a Reply