Toastada

Vanilla Javascript toast notifications for your application. The goal of toastada is to provide a ligthweight javascript solution to creating your own custom notification system. By removing external dependencies, we can have the smallest possible library that works with all modern browsers.

Getting started

Install from npm

npm install --save toastada

Playground

For a quick live environment, run

npm install
npm run demo

Basics of use

In order to create a toastada notification, just invoke one of the 4 supported methods and pass a custom message as the sole argument. For example,

toastada.success('You did it! Great job!');

toastada.info('Here is some information before you proceed.');

toastada.warning('Warning! You are about to delete important data!');

toastada.error('Oh no! Something went wrong. Please try again.');

In order for all of the toast notifications to be visible, you will need to configure the toast classes via the toast.setClasses() method that you can see below. These classes will be applied to their respective toast types, so you can style your toasts however you please! View the demo for a live example. Take note of the use of the setClasses method and the provided classes. Feel free to copy the example CSS as you see fit.

Options

Toastada supports configuration right out of the box. The available options can be set via

toastada.setOptions({
    prependTo: document.getElementById('container'),
    lifeSpan: 5000
});

Option	Description	Default
prependTo	The dom element that the toast notification will be prepended to.	document.body.childNodes[0]
lifeSpan	The duration in milliseconds that the toast notification will appear on the page.	4000 (ms)
position	The position of the toast notifications on the page. (Currently only default supported)	top-right
animate	Whether or not the toast notification should animate on exit.	false
animateDuration	The length of time in milliseconds the toast notification should animate before being removed from the DOM.	0

Classes

Since Toastada is configured entirely via javsacript, you can configure the classes that will be applied to the corresponding elements via

toastada.setClasses({
    animate: 'animation-toast',
    success: 'success',
    error: 'critical'
});

Class	Description	Default
container	The class name of the container that all of the toast notifications will be prepended to.	toast-container
animate	The name of the class that will be applied to all of the toast notifications as their duration expires and they begin to animate.	toast-exit
default	The class name that will be applied to all toast notifications.	toast
success	The class name that will be applied to all toast notifications invoked using toastada.success(message).	toast-success
info	The class name that will be applied to all toast notifications invoked using toastada.info(message).	toast-info
warning	The class name that will be applied to all toast notifications invoked using toastada.warning(message).	toast-warning
error	The class name that will be applied to all toast notifications invoked using toastada.error(message).	toast-error

View demo