Customizable Push Notification Library For The Web – Notifier.js

Preview:

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