Pure Toast Notification JavaScript Library | Toastify JS

Toast Notification JavaScriptToastify JS is an easy, lightweight, vanilla JavaScript library used for sending stackable, non-blocking toast messages to end customers.

Advantages:

  • Multiple notifications are stacked
  • Customizable
  • Not blocked from implementing the thread

Must Read: A Lightweight Toast Notification Snack Bar Component | Mosha Vue Toastify

How to make use of it:

Import the JavaScript file ‘toastify.js’ into the HTML document.

<script src="src/toastify.js"></script>

Create a toast message and specify in milliseconds to cover the notification.

var myToast = Toastify(
 text: "This is a toast message",
 duration: 5000
)

You are additionally allowed to load messages from a DOM node.

var myToast = Toastify()

Show the toast message. In this instance, the toast message will auto-dismiss after 5 seconds.

myToast.showToast();

The default CSS for the toast message. Copy and paste the CSS as a display on the web page.

.toastify 
  padding: 12px 20px;
  color: #ffffff;
  display: inline-block;
  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
  background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
  background: linear-gradient(135deg, #73a5ff, #5477f5);
  position: fixed;
  top: -150px;
  right: 15px;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 2px;
  cursor: pointer;


.toastify.on { opacity: 1; }

Specify the container during which you wish to show the toast message.

myToast = Toastify()

Execute a callback function as you click on the toast message.

myToast = Toastify({
  text: "This is a toast message",
  duration: 5000,
  onClick: function(){}
})

Execute a callback function after the toast message is dismissed.

myToast = Toastify({
  text: "This is a toast message",
  duration: 5000,
  callback: function(){}
})

More configuration options.

myToast = Toastify({
  // On-click destination
  destination: null,

  // Open destination in new window
  newWindow: false,

  // Show toast close icon
  close: false,

  // Toast position - top or bottom
  gravity: 'bottom',

  // Toast position - left or right
  positionLeft: false,
  position: 'left'

  // Background color
  backgroundColor: "linear-gradient(135deg, #73a5ff, #5477f5)",

  // Avatar
  avatar: "",

  // Additional classes for the toast
  classeName: ""

  // Prevents dismissing of toast on hover
  stopOnFocus: true,

  // Toast offset
  offset: { x: 0, y: 0 }
})

See Demo And Download

Official Website(apvarun): Click Here

This superior jQuery/javascript plugin is developed by apvarun. For extra advanced usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Leave a Reply

Your email address will not be published. Required fields are marked *