Github

Awesome

React, Angular, Vue, and Typescript compatible snackbar

# Features

  • Action Button
  • Dark/Light Theme
  • Custom Position
  • Icon Support
  • Custom Style
  • Custom Markup
  • Multiple Snackbars At The Same Time
  • Update On Fly
  • User Event Detection
  • Custom Timeout
  • Manual Hiding
  • Callback After Hide
  • Responsive Design
  • Dynamic HTML
  • Lightweight
  • Zero Dependency

# Installation

> step 1 : you can use either npm or yarn, or import the main file with the script tag.

# npm

# yarn

# html (download the snackbar.js file from the src directory)

> step 2 : include the package in your code:

# npm and yarn

> step 3 : start making snackbars!

# Action Button

Create a custom button with a callback using the action button:

# Position

You can position the snackbar by setting the position parameter:

# bottom left (default)

# bottom center

# bottom right

# top left

# top center

# top right

# Icon Support

You can add an icon to your snackbar with the iconSrc parameter:

import loadingIcon from './src/loading.gif';

# Theme

The default theme is dark, but you can enable the light theme with the theme parameter:

# Custom Style

The Awesome snackbar's html markup is equivalent to below:

So you can apply your custom style in a form of an array of classes:

# you can even add your custom markup (like the 'bold' class below)

# Timing

The default timeout for hiding is 4 seconds but you can customize it with the timeout parameter:

# Notice: when the waitForEvent is set to true(which is the default value), if an event happens after the timeout value after creating the Snackbar, the timeout value divides by two.

# For example, if the timeout value is 4 seconds and an event happens 3 seconds after the snackbar is created, 4 seconds later the hide animation starts, but if that event happens 5 seconds after the snackbar is created, the hide animation starts in 2 seconds.

Or you can set the timeout to zero so the auto-hide would be disabled (click on the action button automatically will hide it)

You can also call the hide() function manually:

# click to hide

# Wait For Event

By default, a snackbar waits for an event to hide, but if your message is not that important, you can disable this feature with the waitForEvent parameter:

# Update On Fly

If you store the returned object from the new Snackbar() function, you can set some of its attributes after its created:

# create a simple snackbar

# update the text

# change the position

# add an icon

# change the theme

# change the style

# and hide

# After Hide

When the waitForEvent is set to true(which is the default value), the hide function is waiting for an event to start hiding timeout, so it may not occur exactly after the specified timeout after snackbar creation, so if you want to run a function after your snackbar hides, you can use the afterHide parameter for it: