Simple Flexible Toast Notification In JavaScript – toastmejs

Category: Javascript , Notification | May 7, 2019
Author: AlexSegen
Views Total: 231
Official Page: Go to website
Last Update: May 7, 2019
License: MIT

Preview:

Simple Flexible Toast Notification In JavaScript – toastmejs

Description:

toastmejs is a lightweight, easy, flexible, customizable toast notification library in vanilla JavaScript.

Features:

  • Plain and light themes.
  • Custom icons.
  • Position variables.
  • Custom timeout.
  • Success/Error/Warning/Info types.

How to use it:

Install & import.

# NPM
$ npm install toastjs --save
import toastme from 'toastjs'

Or directly load the following JS & CSS files in the document.

<link rel="stylesheet" href="./dist/css/toastme.css"/>
<script src="./dist/js/toastme.js" ></script>

Create a new toastme instance.

const myToast = new Toastme();

Create the toast notification.

myToast.default("This is a 'default' notification")
myToast.success("This is a 'success' notification")
myToast.error("This is an 'error' notification")
myToast.warning("This is a 'warning' notification")
myToast.info("This is an 'info' notification")

Config the toast notification by overriding the default parameters as follows:

const myToast = new Toastme({
      timeout: 5000,
      distanceX: 15,
      distanceY: 15,
      positionY: "bottom", // or 'top'
      positionX:" right", // or 'left', 'center'
      zIndex: 100,
      ligh: false // light theme?
});

Changelog:

v1.2.1 (05/07/2019)

  • Added: babel transpiler
  • Fix: change notification box size according to the text

v1.2.0 (05/03/2019)

  • Improve CSS Positioning

v1.1.0 (05/03/2019)

  • Added stackable notification support.

05/01/2019

  • Added missing default notification

04/30/2019

  • Various fixes and improvements

04/18/2019

  • Add dialog

You Might Be Interested In:


Leave a Reply