Easy Vanilla JavaScript Toast Message Library

A lightweight and easy-to-use Vanilla JS library for toast-like popup notifications. Can be used to notify your users about the result of a task, an ongoing process, or anything you need to communicate with them.

Features:

• Auto dismiss or not.
• Countdown progress bar.
• 5 notification types.
• 7 position options.
• Click & Close events.

How to use it:

1. Install & import the easy-v-toast.

# NPM
$ npm i easy-v-toast

// ES Module
import Toast from "easy-v-toast/src/js/toast";
import "easy-v-toast/dist/toast.min.css";

// Via script tag
<script src="toast.with.css.js"></script>

2. Initialize the easy-v-toast.

const toast = new EasyToast({
      // options here
})

3. Create toast notifications of various types.

// success
toast.success("This is a success toast!")
// warning
toast.warning("This is a warning toast!")
// danger
toast.danger("This is a danger toast!")
// dark
toast.dark("This is a dark toast!")
// notify
toast.notify("This is a default toast!")

4. Config the toast notifications.

const toast = new EasyToast({
      // duration in seconds
      duration: 3,
      // top-left, top-middle, top-right
      // center
      // bottom-left, bottom-middle, bottom-right
      position: 'bottom-right',
      // shows a close button inside the toast
      hasCloseButton: true,
      // shows a timer inside the toast
      showTimeline: true,
      // auto close after a timeout
      autoclose: true,
      // stops the timer on hover
      stopOnHover: true,
      // events
      events: {
        'click': null,
        'closeClick': null,
      }
      
})