Simple Fast Toast Notification Popup Library – z-toast

Preview:

Description:

When developing modern applications (web or mobile), a toast notification seems to be a must. A toast notification is basically a message that’s displayed for a short amount of time in the bottom part of the screen (or above, it’s up to you).

In this post, I’ll introduce you to a lightweight toast notification component for modern web apps in vanilla JavaScript. It’s blazing fast, easy to use, and fully customizable. Enjoy.

See Also:

• 10 Best Toast Notification JavaScript Libraries

How to use it:

1. Load the z-toast’s JavaScript and Stylesheet.

<link rel="stylesheet" href="bin/z-toast.css">
<script src="bin/z-toast.js" type="module"></script>

2. Show a toast notification on the screen.

ZToast("This is a toast message.")

3. Set the position of the toast notification(s). Default: bottom.

// top
ZToaster.classList.add('top')
// top left
ZToaster.classList.add('top', 'left')
// top right
ZToaster.classList.add('top', 'right')
// bottom left
ZToaster.classList.add('bottom', 'left')
// bottom right
ZToaster.classList.add('bottom', 'right')

4. Override the default styles.

.z-toast {
  background-color: var(--z-toast-background, #333333);
  border-radius   : var(--z-toast-corner-radius, 6px);
  color           : var(--z-toast-foreground, #fafafa);
  font-size       : var(--z-toast-font-size, 1rem);
  max-width       : min(var(--z-toast-max-width, 35ch), 90vw);
  padding         : 1ch 2ch;
  transition      : background-color 300ms;
  will-change: transform;
  --z-toast-background-light: #333333;
  --z-toast-foreground-light: #fafafa;
  --z-toast-background-dark : #fafafa;
  --z-toast-foreground-dark : #333333;
}