Small Vanilla JavaScript Toast Notification library – Vanilla Toast

Preview:

Description:

Vanilla Toast is a small yet customizable toast notification library in pure vanilla JavaScript.

Features:

• Auto closes after a certain timeout.
• 6 notification types: info, success, warning, error, plain, and custom.
• 4 positions: Bottom Left, Bottom Right, Top Left, Top Right.
• Can be placed in any containers.

Installation:

# NPM
$ npm install vanilla-toast --save
# Bower
$ bower install vanilla-toast

How to use it:

Include the minified version of the Vanilla Toast on the web page.

<script src="vanilla-toast.min.js"></script>
<link href="vanilla-toast.min.css" rel="stylesheet">

The JavaScript to show toast messages on the page.

• position: the position of the toast messages. ‘bottom-left’, ‘bottom-right’, ‘top-left’, and ‘top-right’.
• timeOut: auto closes the toast message after x milliseconds.

toast.showInfo("This is info. It is really long and it doesn't really fit into this small toast", "This is info message", position, timeOut);
toast.showSuccess("Success", "You made it. Congratulations!", position, timeOut);
toast.showWarning("This is warning", "This is warning message. It is really long and it doesn't really fit into this small toast", position, timeOut);
toast.showError("This is error", "This is error message. It is really long and it doesn't really fit into this small toast", position, timeOut);
toast.showPlain("This is simple message", "This is error message. It is really long and it doesn't really fit into this small toast", position, timeOut);
toast.showCustom("Cookie!", "Man, I love cookies!", "icCookie.svg", position, timeOut);

Sometimes you might need to display the toast messages in a specific container.

var toastParent = document.querySelector(".custom-container");
new VanillaToast(toastParent);