toastmejs

:zap: ToastmeJS

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.

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

Customization

You can customize text, title, buttons text and optionally, you can select 'type' of dialog for more specific needs.

• title: dialog title
• text: dialog text
• textConfirm: Confirm button caption
• textCancel: Cancel button caption
• showCancel: show cancel button? 'true' or 'false'
• type: select 'success', 'danger', 'warning', 'info' or 'question'
• dark: set 'true' if you want dark theme (optional) - empty for ligh theme.
• animations: Show animations? It's true by default

Building for source

Run this command if you need to recompile source files:

$ gulp

Todos

• Custom button colors
• Custom HTML templates

Changelog

Version 1.2.7

• HotFix: Fix wrong export

Version 1.2.6

• HotFix: Remove debugger (Sorry!)

Version 1.2.5

• HotFix: Remove deprecated browserList config

Version 1.2.4

• Fix: #12 Dialog height broken
• Fix: Default list-style showing in some browsers
• Updated: Notification and dialog styles
• Added: Animation can be disabled (animations: true | false)

Version 1.2.3

• Updated: CSS notifications displaying rules.
• Added: Handle duplicated notifications. New boolean parameter: duplicates.

Version 1.2.2

• Updated: CSS notifications overlaping rules.
• Updated: CSS dialogs overlaping rules.
• Updated: Develop Environment
• Updated: Readme
• Updated: Demo page design

Version 1.2.1

• Added: babel transpiler.
• Fix: change notification box size according to the text - #1

Version 1.2.0

• Added notifications and dialog dark themes
• Improved CSS positioning
• Replace icons SCSS variables on ligh theme
• Stacked notifications!
• Fixed Package JSON entry
• Removed unnecesary dependencies
• Added missing default notifications
• New animations and icons
• Validate Module Exports when Client or Server

IMPORTANT: now you need to use brackets when importing toastmejs. Ex:

import { toastme } from 'toastmejs';

Note: "ligh" boolean option whitin notifications will be deprecated (and posibly removed) on next versions. Now you can select a specific theme.

License

MIT

Free Software, Hell Yeah!