Snackbar Notification Component For jQuery - js-snackbar

js-snackbar is a really small JavaScript (jQuery) plugin which provides an easy way to create Android & Material Design snackbar notifications with custom action support.

See also:

• Best Toast Notification jQuery Plugins
• Top 10 Toast Notification JavaScript Libraries

How to use it:

1. Load the Material Icon library for the snackbar icons.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. Load jQuery JavaScript library and the js-snackbar's files in the html document.

<link rel="stylesheet" href="css/snackbar.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="js/snackbar.js"></script>

3. Create the snackbar tag on the page.

<snackbar></snackbar>

4. Create a normal snackbar that automatically dismiss after 5 seconds.

const snackbar  = new SnackBar;

snackbar.make("message",[

  // message
  "Unable to connect the server",

  // action text
  null,

  // vertical position
  "bottom",

  // horizontal position
  "center"
  
], 5000);

5. Create a action snackbar that listening for the action and do something when you click the action button.

const snackbar  = new SnackBar;
snackbar.make("action",[

  // message
  "Unable to connect the server",

  // action button
  "retry",

  // vertical position
  "bottom",

  // horizontal position
  "center"

], null);

snackbar.action(function(state){
  //alerting the state for testing purposes
  if(state){
    alert("true");
  }
  snackbar.close();
});

Changelog:

2018-07-12

• ability to change the colors and remove the use of Google Icons

---

This awesome jQuery plugin is developed by Kascique. For more Advanced Usages, please check the demo page or visit the official website.