Beautiful Google Inspired Snack Bar In JavaScript – Snackbar.js

Category: Javascript , Notification , Recommended | August 21, 2019
Views Total:872 views
Official Page:Go to website
Last Update:August 21, 2019


Beautiful Google Inspired Snack Bar In JavaScript – Snackbar.js


A pretty nice Android inspired snack bar component that shows feedback messages to your users with custom action/callback support.

See also:

How to use it:

Install the Snackbar.js package with NPM.

# Yarn
$ yarn add @snackbar/core
$ npm install @snackbar/corer --save

Import the Snackbar.js.

import { createSnackbar } from '@egoist/snackbar'
import '@snackbar/core/dist/snackbar.css'

Or directly include the JavaScript and CSS files from a CDN.

<link rel="stylesheet" href=""/>
<script src=""></script>

Display a default snack bar at the bottom of the screen.

snackbar.createSnackbar('Default Notification')

Config the library to automatically dismiss the snack bar after a timeout.

snackbar.createSnackbar('Default Notification',{
  timeout: 3000

Customize the position of the snack bar: “left” | “center” | “right”.

snackbar.createSnackbar('Default Notification',{
  position: 'right'

Execute a callback function when the users click the action button.

snackbar.createSnackbar('Default Notification',{
  actions: [
      text: 'Confirm',
      style: {
        color: 'pink'
      callback(button, snackbar) {
        if (window.confirm('You really wanna dismiss me?')) {

Use the light theme instead.

snackbar.createSnackbar('Default Notification',{
  theme: 'light'

Or apply your own CSS styles:

snackbar.createSnackbar('Default Notification',{
  theme: {
    backgroundColor: '#222',
    actionColor: '#333'

Specify the maximum stacks to display, earlier created snackbar will be hidden.

snackbar.createSnackbar('Default Notification',{
  maxStack: 3


v1.7.0 (08/21/2019)

  • allow message to be a DOM node

v1.6.0 (08/21/2019)

  • Update package name

v1.5.1 (08/03/2019)

  • Fix type of SnackOptions theme property

v1.5.0 (07/29/2019)

  • add Stack effect

v1.4.0 (06/25/2019)

  • add theme option

v1.3.2 (06/25/2019)

  • Bugfix

v1.3.0 (06/22/2019)

  • stop the snackbar from hiding when hovered

v1.2.2 (06/03/2019)

  • Bug Fixes: pkg: add types field

v1.2.1 (05/28/2019)

  • fix z-index

You Might Be Interested In:

Leave a Reply