js-snackbar
Custom SnackBar notifications inspired by Material Design and node-snackbar
Installation
$ npm install js-snackbar -P
Usage
;; // basic example; // add a custom class to override styles, use the icon close button, display a face notify icon; // override background; // override onActionClick;Find additional examples in src/App.js
Requirements
In order to display the notify icons and icon close button, we rely on Material Design icons, Google fonts, and Material Design Lite stylesheets.
If your project is not already referencing these, you can add the following to the <head> section of your index.html file.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">Please note these are only required to use notifyIcon = 'some_md_icon' and actionType = ACTION_TYPE.CLOSE
Configuration
The following attributes can be customized
// The SnackBar message to display text: 'Default Text' // Color of the SnackBar text textColor: '#ffffff' // The SnackBar container width width: 'auto' /** * The type of action button * NONE: no button TEXT: text button CLOSE: close icon button */ actionType: ACTION_TYPENONE // Sets the button text when ACTION_TYPE.TEXT actionText: 'Dismiss' // Color of the action text actionTextColor: '#ffffff' // SnackBar background color backgroundColor: '#323232' /** * SnackBar display position * 'bottom-left', 'bottom-center', 'bottom-right', 'top-left', 'top-center', 'top-right' */ pos: 'bottom-right' // milliseconds to display the SnackBar duration: 5000 // pause and restart duration after mouse hover pauseOnHover: false // Class to apply to the SnackBar - this can be used to override all styles customClass: '' // Material Design icon to display to the left of the SnackBar text notifyIcon: null // Url of an image to display to the left of the SnackBar text (beta) imgSrc: null // Invoked when the SnackBar action button is clicked { elementstyleopacity = 0; } // Invoked when the SnackBar itself is clicked { elementstyleopacity = 0; } // Invoked when the SnackBar closed via timing out { ; }Run Locally
start local server @ http://localhost:8080. The start script copies the index.js file to src/snackbar.js.
$ npm start
Build updated css
$ npm run build-css
Inspiration
This repo was lovingly forked and hacked from the awesome node-snackbar
A few of the changes:
- Ability to use an action icon button
- Ability to display a notify icon
- Ability to display a notify image
- Local React hacking environment