Pretty Clean Toast Notification Plugin – jtoast.js

Category: Javascript , Notification | December 3, 2019
Author: mehrabsha
Views Total: 30
Official Page: Go to website
Last Update: December 3, 2019
License: MIT

Preview:

Pretty Clean Toast Notification Plugin – jtoast.js

Description:

Yet another pure JS toast notification plugin for creating Material Toasts like notification popups on the webpage.

See Also:

Key Features:

  • Stackable and non-blocking.
  • Sticky or Temporary.
  • 7 position variables.
  • Custom styles.
  • success, error, warning types.
  • Fade in/out animations.

How to use it:

1. Import the stylesheet toastStyle.css and JavaScript toast.js from the dist folder.

<link href="src/toastStyle.css" rel="stylesheet" />
<script src="src/toast.js" defer></script>

2. Initialize the plugin and create a new notification instance. Available parameters:

  • fade_in: fadeIn speed in ms
  • fade_out: fadeIn speed in ms
  • position: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
init({
  fade_in : 800 ,
  fade_out : 800 ,
  position : 'bottom-left'
});

3. Display a toast notification on the screen.

toast({
  title : 'Toast Title',
  description : 'Toast message here'
})

4. Auto dismiss the toast notification after a timeout you specify.

toast({
  title : 'Toast Title',
  description : 'Toast message here',
  timeout : 3000 // 3 seconds
})

5. Change the notification type. Default: ‘success’.

toast({
  title : 'Toast Title',
  description : 'Toast message here',
  type: 'error'
})

6. Customize the appearance of the toast notification.

toast({
  title: 'Toast Title',
  description: 'Toast message here',
  type: 'custom',
  color: '#fff',
  close_color: '#999',
  border_color: '#43d569',
  icon: 'url(info.png)',
  radius: 3
})

You Might Be Interested In:


Leave a Reply