Responsive Configurable Toast Notification Library – iziToast

Category: Javascript , Notification , Recommended | August 6, 2018
Author: marcelodolza
Views Total: 4,340
Official Page: Go to website
Last Update: August 6, 2018
License: MIT

Preview:

Responsive Configurable Toast Notification Library – iziToast

Description:

iziToast is a simple, fast yet fully configurable JavaScript used to create responsive, elegant and CSS3 animated toast notifications of various types in the screen.

Key features:

  • 4 built-in themes: info, warning, error, and success.
  • Easy to add your own themes.
  • Custom icons.
  • Custom images.
  • Custom positions.
  • Auto close with a progress bar.
  • Custom CSS3 transitions.

Basic usage:

Download and import the following files into the document.

<link rel="stylesheet" href="iziToast.min.css">
<script src="iziToast.min.js"></script>

The JavaScript to show a basic toast notification in the screen.

iziToast.show({
    title: 'Hello World!',
    message: 'I am a basic toast message!'
});

All default settings which can be used to customize the notifications.

class: '',
title: '',
message: '',
color: '', // blue, red, green, yellow
icon: '',
iconText: '',
iconColor: '',
image: '',
imageWidth: 50,
layout: 1,
balloon: false,
close: true,
rtl: false,
position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
target: '',
timeout: 5000,
pauseOnHover: true,
resetOnHover: false,
progressBar: true,
progressBarColor: '',
animateInside: true,
buttons: {},
transitionIn: 'fadeInUp', // bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
transitionOut: 'fadeOut', // fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
transitionInMobile: 'fadeInUp',
transitionOutMobile: 'fadeOutDown',
onOpen: function () {},
onClose: function () {}

API.

// override options
iziToast.settings({
  // options here
});

// hide the toast notification
iziToast.hide();

// create 'Info' toast notification
iziToast.info({
  title: 'Hello World!',
  message: 'I am a toast message!'
});

// create 'Success' toast notification
iziToast.success({
  title: 'Hello World!',
  message: 'I am a toast message!'
});

// create 'Warning' toast notification
iziToast.warning({
  title: 'Hello World!',
  message: 'I am a toast message!'
});

// create 'Erro' toast notification
iziToast.error({
  title: 'Hello World!',
  message: 'I am a toast message!'
});

// remove all the toast notifications from DOM
iziToast.destroy();

Changelog:

08/06/2018

  • v1.4.0

You Might Be Interested In:


2 thoughts on “Responsive Configurable Toast Notification Library – iziToast

Leave a Reply