Beautiful Google Inspired Snack Bar In JavaScript – Snackbar.js

Category: Javascript , Notification , Recommended | August 21, 2019
Author: egoist
Views Total: 354
Official Page: Go to website
Last Update: August 21, 2019
License: MIT

Preview:

Beautiful Google Inspired Snack Bar In JavaScript – Snackbar.js

Description:

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
$ 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="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'
  }
})

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

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

Changelog:

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