Small Vanilla JavaScript Toast Notification library – Vanilla Toast

Category: Javascript , Notification | October 25, 2017
Author: konrad-g
Views Total: 1,426
Official Page: Go to website
Last Update: October 25, 2017
License: MIT

Preview:

Small Vanilla JavaScript Toast Notification library – Vanilla Toast

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);

You Might Be Interested In:


Leave a Reply