Lightweight Toast-like Notification Bar Library – toastKing

Category: Javascript , Notification | August 31, 2022
Author:rudraWorks
Views Total:49 views
Official Page:Go to website
Last Update:August 31, 2022
License:MIT

Preview:

Lightweight Toast-like Notification Bar Library –  toastKing

Description:

toastKing is a lightweight, zero-dependency JavaScript library for creating toast-like non-blocking notification bars on the web. It is inspired by the success of Google’s Material Design design language developed by Google in 2014.

Intended for use when you want a temporary notification message to be displayed over the top of an element for 3 or 5 seconds and then automatically fade out if it’s not interacted with.

Features:

  • Countdown bar.
  • Auto dismiss after a timeout.
  • 10 pre-built themes.
  • 6 notification types.
  • Click/Dismiss callbacks.

See Also:

How to use it:

1. Download and load the main JavaScript in the document.

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

2. Display a basic notification bar on the page.

toastKing({                  
  message: 'Notification Message',
})

3. It comes with 10 pre-built themes:

  • moss
  • sunnyDays
  • anwar
  • plain (default)
  • stripe
  • endlessRiver
  • instagram
  • ukraine
  • celestial
  • meredian
toastKing({
  message: 'Notification Message',         
  design: 'stripe',
})

4. And 6 notification types:

  • danger
  • warning
  • success (default)
  • ok
  • info
  • prohibited
toastKing({
  message: 'Notification Message',         
  type: 'info',
})

5. Set the time to wait before dismissing the notification bar. Default: 5s.

toastKing({
  message: 'Notification Message',         
  duration: 10,
})

6. Determine whether to show progressbar, bar border, and box shadow.

toastKing({
  message: 'Notification Message',         
  progressBarVis:true,
  borderVis:false,
  shadowVis:true,
})

7. Determine whether to pause the countdown bar when the notification bar is focused. Default: true.

toastKing({
  message: 'Notification Message',         
  stopOnFocus: false,
})

8. Available callback functions.

toastKing({
  message: 'Notification Message',         
  onClick: function(){},
  onDismiss: function(){},
})

You Might Be Interested In:


Leave a Reply