Vanilla ES6 JavaScript Toast Notification Library – toaster-js

Preview:

Description:

toaster-js is a vanilla JavaScript plugin for displaying different types of toast notification popups (info, message, warning, error, done) with CSS3 based animations.

Install it via NPM

$ npm install toaster-js

How to use it:

Import it into your project or include the JavaScript file umd.js on your html page.

<script src="umd.js"></script>

Include the core stylesheet in the header of the html page.

<link rel="stylesheet" href="default.css">

Create toast messages using Toast method. Available parameters:

• message: toast message
• type: info, message, warning, error or done
• timeout: auto-dismiss after a specific timeout

Toast(message, type, timeout)

Set the Y-axis origin of the toast messages.

configureToasts({
  topOrigin: 0
});

Set the delete delay in milliseconds.

configureToasts({
  deleteDelay: 300
});

Delete all existing toast notifications.

deleteAllToasts()

Changelog:

09/25/2018

• New: pass HTML elements as toast contents