Sliding Toast Notification Plugin With Pure JS – Toasteo

Category: Javascript , Notification | July 10, 2018
Author: fhusquinet
Views Total: 96
Official Page: Go to website
Last Update: July 10, 2018
License: MIT

Preview:

Sliding Toast Notification Plugin With Pure JS – Toasteo

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()

Leave a Reply