Toast Notification With Timer In Vanilla JavaScript – notify-js

notify-js is a vanilla JavaScript notification library for displaying growl- and toast-like notification messages on the webpage.

Features:

• Custom styles.
• With countdown timer.
• Specified timeout.

See also:

• Best Toast Notification jQuery Plugins
• Best Toast Notification JavaScript Libraries

How to use it:

Import the main JavaScript notify-js.js in the document.

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

Create a basic toast notification which will automatically dismiss after 3 seconds.

new NotifyJS({
    message: "Default notification"
})

Customize the timeout in milliseconds. Defaults to 3000ms.

new NotifyJS({
    message: "Default notification",
    duration: 5000
})

Enable a countdown timer inside the toast notification.

new NotifyJS({
    message: "Default notification",
    duration: 5000,
    timer: true
})

Apply custom CSS styles to the toast notification.

new NotifyJS({
    message: "Default notification",
    duration: 5000,
    timer: true
},
{
    color: 'rgb(245,233,23)',
    textColor: 'crimson',
    fontFamily: 'Open Sans',
    customCSSBox: `border-bottom: 3px solid salmon; background-color: rgb(106, 0, 255);`
})