Lightweight Toast-like Notification Bar Library – toastKing

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:

• 10 Best Toast Notification JavaScript Libraries

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(){},
})