Web notifications and dialogs with pure javascript
npm install toastmejssh
$ npm install toastmejs --save
`
Then import toastme
`sh
import {toastme} from 'toastmejs'
or
const toastme = require('toastmejs')
`
#### Via CDN
Import the CSS via a and elements:
`sh
`
#### Download
Or simply download the files and include necesary CSS/JS files to your project.
Download here>)
Usage
$3
Call one of these functions to show the notification you need
`sh
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
`sh
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.
`sh
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:
`sh
myToast.success('This is a new success notification')
`
$3
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:
`sh
//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:
`sh
$ gulp
`
$3
- 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:
`sh
import { toastme } from 'toastmejs';
``