Beautiful Google Inspired Snack Bar In JavaScript – Snackbar.js

Preview:

Description:

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

How to use it:

Install the Snackbar.js package with NPM.

# Yarn
$ yarn add @egoist/snackbar

# NPM
$ npm install @egoist/snackbar --save

Import the Snackbar.js.

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

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

<link rel="stylesheet" href="https://unpkg.com/@egoist/snackbar/dist/snackbar.min.css"/>
<script src="https://unpkg.com/@egoist/snackbar/dist/snackbar.min.js"></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?')) {
          snackbar.destroy()
        }
      }
    }
  ]
})

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'
  }
})

Changelog:

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