Create Custom Toast Notifications In Vanilla JavaScript – Toastada

Toastada is a vanilla JavaScript notification plugin that provides a simple way to display customizable toast messages on the web page. By default, the toast notifications will auto-dismiss after 4 seconds, with a configurable sliding effect.

Installation:

npm install --save toastada

How to use it:

Import the main JavaScript file into the webpage:

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

Create toast messages using the following JS syntax.

toastada.success('Success!');
toastada.info('Information');
toastada.warning('Warning!');
toastada.error('Error');

The primary toast stylings.

/* Entire toast container */
.toast-container {
  position: fixed;
  z-index: 999999999;
  max-width: 300px;
  /*min-width: 300px;*/
}
/* Each toast gets this style */
.toast {
  /*width: 300px;*/
  font-family: "helvetica neue";
  font-weight: 200;
  letter-spacing: 2px;
  opacity: 1;
  position: relative;
  right: 0;
  color: white;
  background: rgba(50,50,50,.9);
  padding: 20px;
  margin-bottom: 8px;
  border-radius: 3px;
  transition: .3s all ease;
}
.toast.toast-exit {
  transition: .4s all ease;
  transform: translate3d(0,0,0);
  right: -300px;
  opacity: 0;
}

Custom notification styles.

/* Successful toast class */
.toast-success {
  background: rgba(126,211,33,.9);
  box-shadow: 0 5px 15px rgba(126,211,33,.5);
}
.toast-info {
  background: rgba(0,50,250,.9);
  box-shadow: 0px 5px 15px rgba(0,50,250,.5);
}
/* Error toast class */
.toast-error {
  background: rgba(191,36,58,.9);
  box-shadow: 0 5px 15px rgba(191,36,58,.5);
}
/* Warn toast class */
.toast-warn {
  background: rgba(245,166,35,.9);
  box-shadow: 0 5px 15px rgba(245,166,35,.5);
}

More configuration options.

toastada.success('Success!', {
  prependTo: document.body.childNodes[0],
  lifeSpan: 4000, // timeout
  position: 'top-right',
  animate: false, // enable animation
  animateDuration: 0
});

Changelog:

09/25/2018

• Update JS