Handy Pure JavaScript Notification Library – notify.js

Category: Javascript , Notification | April 19, 2019
Author: dacoto
Views Total: 302
Official Page: Go to website
Last Update: April 19, 2019
License: MIT

Preview:

Handy Pure JavaScript Notification Library – notify.js

Description:

A small handy JavaScript notification library to create nice notifications with custom icons, links, and styles on the web application.

How to use it:

Load the main JavaScript file notify.js from the dist folder.

<script src="dist/notify.js"></script>

Create notifications and specify the notification types:

new Notify({
    title: "Notification title",
    message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu orci id enim gravida ornare nec eu quam. Quisque sed rutrum mi. Cras id risus quam. Cras ultricies pretium purus, sit amet fringilla dui vehicula ut."
}, "danger");

new Notify({
    title: "Notification title",
    message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu orci id enim gravida ornare nec eu quam. Quisque sed rutrum mi. Cras id risus quam. Cras ultricies pretium purus, sit amet fringilla dui vehicula ut."
}, "primary");

new Notify({
    title: "Notification title",
    message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu orci id enim gravida ornare nec eu quam. Quisque sed rutrum mi. Cras id risus quam. Cras ultricies pretium purus, sit amet fringilla dui vehicula ut."
}, "success");

new Notify({
    title: "Notification title",
    message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu orci id enim gravida ornare nec eu quam. Quisque sed rutrum mi. Cras id risus quam. Cras ultricies pretium purus, sit amet fringilla dui vehicula ut."
}, "warning");

Display the notifications.

instance.open();

Dismiss the notifications.

instance.close();

Customize the notification icon.

new Notify({
    icon: "icon class here"
}, "danger");

Set the width of the notification. Default: 420px.

new Notify({
    width: 300
}, "danger");

Specify the timeout in milliseconds. 0 means always show until you close it.

new Notify({
    duration: 0
}, "danger");

Determine auto show the notification on init. Default: true.

new Notify({
    autoOpen: false
}, "danger");

Add an action link to the notification.

new Notify({
    link: {
      linkHref: 'https://www.cssscript.com',
      linkText: 'Example',
      linkClass: 'custom-class'
    }
}, "danger");

You Might Be Interested In:


Leave a Reply