Simple Vanilla JavaScript Toast Notification Library – Toastify

Preview:

Description:

Toastify is a simple, lightweight, vanilla JavaScript library used for sending stackable, non-blocking toast messages to end users.

How to use it:

Import the main JavaScript file ‘toastify.js’ into the html document.

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

Create a basic toast message and specify the duration in milliseconds to hide the notification.

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

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

myToast.showToast();

The default CSS for the toast message. Copy and paste the CSS styles as displayed below into your 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 in which you want to display the toast message.

myToast = Toastify({
  text: "This is a toast message",
  duration: 5000,
  selector: '#container'
})

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

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, right, or center
  position: 'left'

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

  // Avatar
  avatar: "",

  // Additional classes for the toast
  classes: ""

  // Prevents dismissing of toast on hover
  stopOnFocus: true 
})

Changelog:

v1.6.1 (06/30/2019)

• Deprecation Warning: Migrating from positionLeft property to position – positionLeft is still supported but may be removed in future versions
• Property position to support center as a value along with left and right – Useful for centering toast messages in the page
• Bugfix: Disabling stopOnFocus

v1.5.0 (05/30/2019)

• Added support for persistent toast, and ability to dismiss the toast programatically.

v1.4.0 (05/12/2019)

• Manually import CSS while using as module in your modern JavaScript applications.
• Ability to pause the toast dismiss timer on hover (Using stopOnFocus property)

v1.3.2 (12/07/2018)

• Added z-index attribute.

v1.3.1 (10/09/2018)

• prevents to use !important when overwriting .toastify background color with custom CSS
• Update classnames inside media query

v1.2.1 (05/31/2018)

• Added support for Classes. Now custom classes can be added to the toast while creating it.

v1.2.0 (05/25/2018)

• Fix issue when destination and close options is used at the same time
• Add support for custom classes