Author: | egoist |
---|---|
Views Total: | 680 views |
Official Page: | Go to website |
Last Update: | August 21, 2019 |
License: | MIT |
Preview:

Description:
A pretty nice Android inspired snack bar component that shows feedback messages to your users with custom action/callback support.
See also:
- 10 Best Snackbar Plugins In jQuery And Pure JavaScript
- 10 Best Toast Notification jQuery/JavaScript Plugins
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