Google Style Toast & Snackbar Popup In JavaScript – Material Toast

Preview:

Description:

Yet another Google Material inspired toast & snackbar plugin written in Vanilla JavaScript.

Features:

• Customizable timeout.
• 4 types: info, error, success, warning.
• Custom action button for snackbar.

How to use it:

1. Download the plugin and include the following JavaScript & CSS files in the HTML file.

<link rel="stylesheet" href="mdtoast.min.css" />
<script src="mdtoast.min.js"></script>

2. Create toast notifications as follows:

mdtoast('This is an info toast.', { 
  type: 'info'
});
mdtoast('This is an error toast.', { 
  type: 'error' 
}); 
mdtoast('This is a warning toast.', {
  type: 'warning' 
});
mdtoast('This is a success toast.', {
  type: 'success' 
});

3. Create a snackbar with an action button.

mdtoast('This is a snackbar.', { 
  interaction: true, 
  actionText: 'UNDO',
  action: function(){
    this.hide(); 
  }
});

4. Sometimes you might need to show the toast & snackbar manually.

var instance = mdtoast('This is a snackbar.', { 
    interaction: true, 
    actionText: 'UNDO',
    action: function(){
      this.hide(); 
    },
    init: true
});

instance.show();

5. Override the default timeout (5000ms).

mdtoast('This is an info toast.', { 
  type: 'info',
  duration: 10000
});

6. Enable/disable the modal mode. This means that you can not to toggle other toasts or snackbars until this toast (or snackback) is dismissed.

mdtoast('This is an info toast.', { 
  type: 'info',
  duration: 10000,
  modal: true
});