Android Inspired Snackbars In Vanilla JavaScript – snackbar.js

The snackbar.js JavaScript library allows you to create Android-style snackbars of various types on the web app.

How to use it:

Install the snackbar.js.

# NPM
$ npm install vanilla-snackbar --save

Import the snackbar.js into your project.

import Snackbar from 'vanilla-snackbar';

Or import the following JavaScript file into the web page:

<script src="snackbar.min.js"></script>

Create a default snackbar message which will auto dismiss after 5 seconds.

snack.message('Hello World');

Display a message that must be removed manually.

snack.stickyMessage('Acknowledge me!');

Display a message with a green background (adds class ‘success’).

snack.success('You did it!');

Display a message with a red background (adds class ‘error’).

snack.error("Something didn't work");

Display a message with an orangish/yellow background (adds class ‘warn’).

snack.warn("I'd be careful if I were you...");

Possible options. These options will be set at all time unless overridden by options passed in each call.

• manual_close: Boolean. Provide a close X button (true) vs timed close (false)
• time: ms of time before automatic close. (ignored if manual_close: true)
• class: String containing desired classes.

snack.message('Hello World',{
  manual_close: false,
  time: 5000,
  class: null
});