Toastmejs NPM | npm.io

:zap: ToastmeJS

Build Status Version

ToastmeJS is a very simple, flexible and light weigth plugin that shows Notifications and modal Dialogs on your website.

Customize position, text, colors.
Colorfull, dark and ligh themes.

Demo

Want to see a quick demo? Click here

Features!

Customizable

Light weight < 6kb
Full color, ligh and dark themes

Installation

Toastme does not have any dependencies. Just run next command:

Via NPM

$ npm install toastmejs --save

Then import toastme

import {toastme} from 'toastmejs'

or

const toastme = require('toastmejs')

Via CDN

Import the CSS via a <link /> and <scripts /> elements:

<link rel="stylesheet" href="https://unpkg.com/toastmejs@latest/dist/css/toastme.css">
<script src="https://unpkg.com/toastmejs@latest/dist/js/toastme.min.js" ></script>

Download

Or simply download the files and include necesary CSS/JS files to your project.

Download here

Usage

📣 Toastme Notifications

Call one of these functions to show the notification you need

toastme.default("This is a 'default' notification")

toastme.success("This is a 'success' notification")

toastme.error("This is an 'error' notification")

toastme.warning("This is a 'warning' notification")

toastme.info("This is an 'info' notification")

Customization

You can customize duration, position, distance, z-index and a ligh theme

timeout: miliseconds

positionY: 'top' or 'bottom'

positionX: 'left', 'right' or 'center' position

distanceY: distance from the Y axis

distanceX: distance from the X axis

zIndex: overlapping order

theme: select 'default', 'ligh' or 'dark' theme. Leave empty for default.

duplicates: true or false - by default it's false

animations: true or false - by default it's true

First, import the Toastme Class

import {Toastme} from 'toastmejs'

or

const {Toastme} = require('toastmejs')

Then, you need to declare a new Object with your new custom settings and create a new Toastme Class instance.

const config = {
    timeout: 5000,
    positionY: "bottom", // top or bottom
    positionX: "center", // right left, center
    distanceY: 20, // Integer value
    distanceX: 20, // Integer value
    zIndex: 100, // Integer value
    theme: "default" // default, ligh or  dark (leave empty for "default" theme)
};

const myToast = new Toastme(config);

Finally, you can call your new Toastme with new configurations:

myToast.success('This is a new success notification')

💬 Toastme Dialogs

This works with a javascript Promise that returns True or False, depending on how you interact with it.

npm.io

To use Dialogs, you just need declare the instance and set some default parameters:

//Example
toastme.yesNoDialog({
    title: "You are the Winner!",
    text: "Do you want to pick your price?",
    textConfirm: "Confirm",
    textCancel: "Cancel",
    showCancel: true, // true or false
    type: "success", // 'success', 'danger', 'warning', 'info' or 'question'
	dark: false, // set 'true' if you want dark theme
}).then(function(value) {
    if (value) {
        console.log('You clicked Confirm')
    } else {
        console.log('You clicked Cancel')
    }
});