Custom Notifications In Vanilla JavaScript – Notify.js

Preview:

Description:

Notify.js is a JavaScript library developed with vanilla JS, HTML, and CSS that allows you to create custom notifications.

These notifications can be easily customized by setting, modifying, and combining various options.

How to use it:

1. Include the Notify.js and Notify.css.

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

2. Create a basic notification.

let notification = new Notify('Notification Title', 'Description');

3. Specify the notification types.

// info
let notification = new Notify('Notification Title', 'Description', 'info');
// success
let notification = new Notify('Notification Title', 'Description', 'success');
// warning
let notification = new Notify('Notification Title', 'Description', 'warning');
// error
let notification = new Notify('Notification Title', 'Description', 'error');
// notify
let notification = new Notify('Notification Title', 'Description', 'notify');

4. Customize the notifications by passing the options object as the fourth parameter to the Notify function.

let notification = new Notify('Notification Title', 'Description', 'info',{
    // or 'bottom'
    vAlign: 'top',
    // or 'left'
    hAlign: 'right',
    // auto close after a timeout
    autoClose: true,
    // duration in ms
    autoCloseDuration: 5000,
    // click x button to close
    closeOnCrossClick: true,
    // click the notification box to close
    closeOnNotifyClick: false,
});