Sliding Toast Notification Plugin With Pure JS – Toasteo

Preview:

Description:

Toasteo is a vanilla JavaScript plugin to create configurable, sliding toast notifications of various types on the web app.

The toast notification will automatically slide out after a certain timeout. You can also close the toast notification manually by clicking it.

How to use it:

Install & Download the Toasteo package.

# NPM
$ npm install toasteo --save

Use as an ES6 module.

import Toasteo from "toasteo";

Or include the compiled and minified version of the Toasteo on the webpage.

<link href="dist/css/toasteo.css" rel="stylesheet">
<script src="toasteo.js"></script>

Create the toast notifications that will automatically dismiss after 4 seconds (4000ms).

window.Toasteo.success('Success toast');
window.Toasteo.error('Error toast');
window.Toasteo.warning('Warning toast');
window.Toasteo.info('Info toast');

All default options to customize the toast notification.

let defaultOptions = {
    prependTo: document.body.childNodes[0],
    duration: 4000,
    animateOnRemoving: true,
    animationRemovingDuration: 400,
    animateOnCreation: true,
    closeOnClick: true,
    classes: defaultClasses
};

Remove a specific toast notification (No animation).

let myNotification = window.Toasteo.error('Error toast');
myNotification.remove()

Close the toast notification with an animation.

myNotification.close()

Changelog:

09/24/2018

• v1.0.7