⚡
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 and
<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" >>
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!
7 Oct 29, 2022
12 Dec 12, 2022
1 Aug 22, 2022
5 Dec 20, 2022
2 Jan 18, 2022
4 Mar 16, 2022
14 Dec 17, 2022
196 Dec 20, 2022
8 Nov 2, 2022
7.1k Jan 2, 2023
13 Dec 17, 2022
2 Jun 21, 2022
10 Aug 22, 2022
4 Nov 29, 2022
23 Nov 21, 2022
3 Oct 8, 2020
4 Nov 10, 2022
5 Sep 11, 2022