Pretty Clean Toast Notification Plugin – jtoast.js

Preview:

Description:

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

See Also:

• 10 Best Toast Notification JavaScript Libraries

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
})