Toasteo Demo

Why another Toast package...?

There isn't many lightweight toasts package with zero dependencies, not even jQuery or an animation library.

While I do like those package which support touch screens, fully animated when going on and out of the screen, and pretty easy to use they are quite heavy (usually around 35kb~) and sometimes hard to style because of all the different CSS classes used which is a deal breaker such a simple functionality.

The other lightweight packages on the other hand lack a few methods which are quite useful when building real application (removing existing toasts, remove on click...), that's why Toasteo was created!

Installing Toasteo

Simply run the following line in your terminal to pull up the package from NPM

npm install --save-dev toasteo

Once that's done, you can simply import it in your main file and set it to whatever floats your boat

import Toasteo from './classes/Toasteo';
window.Toasteo = new Toasteo();

UMD Version

If you prefer, you can also use the UMD version using a simple script tag. This version has not been compiled to ES5, you should therefor check if your browser supports ES6.

Styling

You can also pull the CSS file from the node_modules directy using the following syntax, or simply copy it from the dist/css folder.

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

Customizing Toasteo

I added a default CSS file which you can use just like that, it's probably enough for most projects but sometimes you want that extra bit of customization.

You can either choose to keep the default classes used in the package and simply add your own CSS or change everything by providing a custom set of classes when initializing Toasteo.

Here's the default options, feel free to change them however fits your need!

    {
        // The DOM element used to insert the container.
        prependTo: document.body.childNodes[0],

        // The duration in milliseconds after which the toast will be removed.
        duration: 4000,

        // Animate the toast when removing it by adding a CSS class.
        animateOnRemoving: true,

        // The duration of the remove animation in milliseconds, after which the toast will be removed from the DOM.
        animationRemovingDuration: 400,

        // The duration in milliseconds of the creation animation.
        animateOnCreation: true,

        // The toast should be removed when clicked.
        closeOnClick: true,

        // The default classes used by the package.
        classes: {
            container: 'toast-container',
            default: 'toast',
            closing: 'toast--closing',
            creating: 'toast--creating',
            success: 'toast--success',
            error: 'toast--error',
            warning: 'toast--warning',
            info: 'toast--info'
        }
    }

Just to provide a small example, let's say you do not want to remove toasts on click and you want the container to have the "my-custom-toast-container" class.

window.Toasteo = import Toasteo({
    closeOnClick: false,
    classes: {
        container: "my-custom-toast-container"
    }
});

Let's try it out, shall we? :)

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.

A Toast instance will be returned when using these methods, you can learn a bit more about that here

let success_toast = window.Toasteo.success('Your message');
let error_toast = window.Toasteo.error('Your message');
let warning_toast = window.Toasteo.warning('Your message');
let info_toast = window.Toasteo.info('Your message');

The success toast

When you want to provide some feedback to the user about a request being succesful.

The error toast

When the user did not fill a form correctly, when an error happened or anything "dangerous".

The warning toast

This might be useful when the user tries to do something important, like deleting sensitive data.

The info toast

Just want to provide the user with some informations which isn't directly related to an action? Or simply describe what he should do next to catch his attention better? Use this toast!

Closing existing toasts

You might need to close all existing toasts. A good UX case for that would be a form with error toasts on validation then a success toast when the user finally fills it correctly. The user might see two or three error toasts before finally seeing the success toast, which will make the page bloated up with non-relevant toasts — who cares if the form was not filled correctly before, now that is it let's celebrate it!

Closing existing toasts with the given type

Since each toast has it's own type set, you can also choose to only close or remove toasts having a specific type by passing it as a parameter.

Removing existing error toasts

This behave just like the closing logic, expect no animation is provided.

You can also provide a type as the parameter to only remove toasts having the type given.

Let's look a bit deeper inside Toasteo

Each toast has it's own class, making it easy to close or remove an existing toast without affecting the others. The Toast API follows the same logic as the Toasteo API, the only exception is that you need to provide the class and duration used to close a Toast yourself.

let toast1 = window.Toasteo.success('My first toast');
let toast2 = window.Toasteo.info('My second toast');
let toast3 = window.Toasteo.warning('My third toast');

toast2.remove(); // Removing the second toast directly, no animation used.

toast3.close('my-closing-class', 400); // Closing the third toast with an animation using the "my-closing-class" class which last 400ms.

Toasteo

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