Promise-based Toast Notification JavaScript Library – Toast-js

Toast-js an open-source, zero-dependency, promise-based JavaScript Toast Notification plugin. It offers a wide range of configurable and flexible options (eg. changing the notification type, duration, and color), while still keeping it simple to use.

How to use it:

1. Install & download.

# NPM
$ npm i @brenoroosevelt/toast

2. Import the Toast-js.

// ES6 +
import toast from '@brenoroosevelt/toast';
// Browser
import * as toast from "./lib/esm/toast.js";

3. Create toast messages.

toast.create ("Toast message", {
  // options here
})

// OR
toast.system("Toast Message", {
  // options here
}) 
toast.info("Toast Message", {
  // options here
}) 
toast.warning("Toast Message", {
  // options here
}) 
toast.error("Toast Message", {
  // options here
}) 
toast.success("Toast Message", {
  // options here
})

4. All default options.

toast.create("Toast Message", {
  // default, system, error, info, warning, success
  type: 'default',
  // toast title
  title: undefined,
  // top, bottom
  position: 'top',
  // start, center, end
  align: 'end',
  // background color
  bgColor: '#333',
  // text color
  color: '#fff',
  // show close button
  closeBtn: true,
  // duration in ms
  duration: 10000,
  // z-index
  zIndex: 99999,
  // is dismissable?
  dismissible: true,
  // show shadow
  shadow: true,
  // animation speed
  animateIn: 200,
  animateOut: 150,
  // true: bottom
  // false: top
  append: true,
  // max width in px
  maxWidth: 600,
  /* add action buttons
  [{
    text: string,
    value: any,
    bgColor?: string,
    color?: string
  }]
  */
  actions: [],
})

5. It returns a Promise which resolves when the user takes an action on the toast notification:

toast.create("Toast Message")
.then((result) => console.log(result))

toast.create("Notification with action buttonss", {
  position: "top",
  actions: [
    {text: "Yes", value: "ok"},
    {text: "No", value: "no"},
  ]
})
.then((result) => {
  if (result.value === "ok") console.log("user says `yes`")
  if (result.value === "no") console.log("user says `no`")
  if (result.value === "click") console.log("user click to dismiss")
  if (result.value === "close-btn") console.log("user click close button")
  if (result.value === "timeout") console.log("notification has timed out")
})