toasteo v1.0.7

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

Demo & Documentation

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