Easy SnackbarsJS

lightweight library for adding snackbars

Download See GitHub repo

Demo

/* basic */
EasySnackbars.open('Snackbar example');

/* with custom class */
EasySnackbars.open('Snackbar example', {class:'error'});

/* manually closable */
EasySnackbars.open('Snackbar example', {class:'success', closable:true});

/* with custom button */
EasySnackbars.open('Snackbar example', {closable:true, btnLabel:'Action', btnCallback:function(){alert('hello!');}});

Installation

add easy-snackbars.js and easy-snackbars.css to your project files and import them in your HTML code:

<script type="text/javascript" src="easy-snackbars.js"></script>
<link type="text/css" rel="stylesheet" href="easy-snackbars.css" media="all" />

open a snackbar:
```
EasySnackbars.open('Snackbar example');
```
customize style in easy-snackbars.css

Documentation

easy-snackbars object provides a method to open a snackbar:

EasySnackbars.open(text [, settings])

Parameter text

snackbar text, can include HTML code

Parameter settings

an object that will define the snackbar behaviour with these properties:

closable Optional

if true, snackbar will have a close button (default value: false)

closeDelay Optional

time in milliseconds until the snackbar closes automatically, if 0 it will be closable with a single click (default value: 5000)

class Optional

specify a CSS class name in order to customize snackbar look

btnCallback Optional

gives the snackbar a button that will execute the provided callback function when clicked

btnLabel Optional

label for the snackbar btnCallback button (see above)

Shorthand methods

For better readibility, settings parameter can be shortened:

EasySnackbars.open('Snackbar text', true); → {closable:true}
EasySnackbars.open('Snackbar text', 'closable'); → {closable:true}
EasySnackbars.open('Snackbar text', 'error'); → {class:'error'}
EasySnackbars.open('Snackbar text', 10000); → {closeDelay:10000}

License

This project is released under MIT license.