1.0.7 • Published 7 years ago

toasteo v1.0.7

Weekly downloads
3
License
MIT
Repository
github
Last release
7 years ago

Toasteo JS

A simple Toast package that is lightweight (5kb~) with zero dependencies written in vanilla JS

Getting started

Install from npm

npm install --save-dev toasteo

In your JS file

import Toasteo from "toasteo";
window.Toasteo = new Toasteo({});

In your SCSS file

import "~toasteo/dist/css/toasteo.css";

Using the UMD

A UMD version is available in case you are not using webpack or babel. This version has not been compiled to ES5, you should therefor check if your browser supports ES6. You can import it using the following script:

<script src="/node_modules/toasteo/dist/js/toasteo.umd.js"></script>
<script>window.Toasteo = new Toasteo({});</script>
<script src="/node_modules/toasteo/dist/css/toasteo.css"></script>

Basic usage

There is four toasts ready to be used, a success toast, an error toast, a warning toast and an info toast. They all use the same syntax, the only difference is the style applied.

window.Toasteo.success('My success toast');
window.Toasteo.error('My error toast');
window.Toasteo.warning('My warning toast');
window.Toasteo.info('My info toast');

This all works by default using the provided CSS.

Options

You can change the default options when initializing the package.

window.Toasteo = new Toasteo(options};
OptionDescriptionDefault
prependToThe dom element that the toast notification will be prepended to.document.body.childNodes[0]
durationThe duration after which the toast will be removed.4000 (ms)
animateOnRemovingAnimate the toast when removing it by adding a CSS class.true
animationRemovingDurationThe duration of the remove animation in milliseconds, after which the toast will be removed from the DOM400
animateOnCreationAnimate the toast when creating it by adding a CSS class.true
closeOnClickThe toast should be removed when clicked.true
classesThe default classes used by the package. Please see below for the explaination and default values. 
ClassDescriptionDefault
containerThe class set to the toasts containertoast-container
defaultThe class set to every toasttoast
closingThe class set to a toast when using the close methodtoast--closing
creatingThe class set to a toast when creating ittoast--creating
successThe class set to a toast with the success typetoast--success
errorThe class set to a toast with the error typetoast--error
warningThe class set to a toast with the warning typetoast--warning
infoThe class set to a toast with the info typetoast--info

Demo & Documentation

You can see Toasteo in action on the demo page as well as a better documentation.