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