Vanilla ES6 JavaScript Toast Notification Library – toaster-js

Category: Javascript , Notification | September 25, 2018
Author: ZitRos
Views Total: 860 views
Official Page: Go to website
Last Update: September 25, 2018
License: MIT

Preview:

Vanilla ES6 JavaScript Toast Notification Library – toaster-js

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

You Might Be Interested In:


Leave a Reply