Author: | codewithkyle |
---|---|
Views Total: | 439 views |
Official Page: | Go to website |
Last Update: | January 16, 2022 |
License: | MIT |
Preview:

Description:
notifyjs is a vanilla JS notification plugin that shows Material Snackbar and Toasts style notification messages to the user.
How to use it:
Install and import the notifyjs.
# NPM $ npm install @codewithkyle/notifyjs --save
import { Notifier, snackbar, toast, append } from '@codewithkyle/notifyjs';
Or download and import the JavaScript file Notify.js into the document.
<script src="https://cdn.jsdelivr.net/npm/@codewithkyle/[email protected]/notify.min.js"></script>
Create a default snackbar notification on the page.
notifier.snackbar({ message: 'Snackbar Notification Message' });
Create a default toast notification on the page.
notifier.toast({ title: 'Toast Title', message: 'Toast Notification Message' });
Make the snackbar notification auto dismiss after a timeout.
notifier.snackbar({ message: 'Snackbar Notification Message', duration: 4000 });
Determine whether the notification is closeable.
notifier.snackbar({ message: 'Snackbar Notification Message', closeable: true });
Add a custom action button to the snackbar notification.
notifier.snackbar({ message: 'Snackbar Notification Message', buttons: { label: 'Action Button', callback: function(){ // custom function here }, ariaLabel: '', classes: '', autofocus: true } });
Add additional CSS class(es) to the notification wrapper.
notifier.snackbar({ message: 'Snackbar Notification Message', classes: '' });
Determine whether to auto focus on the notification.
notifier.snackbar({ message: 'Snackbar Notification Message', autofocus: true });
Show a horizontal or vertical timer inside the notification.
notifier.snackbar({ message: 'Snackbar Notification Message', timer: "vertical"// or "horizontal" });
Disable the notification queue.
new Notify({ message: 'Snackbar Notification Message', force: true });
All default options.
// snackbar { message: string; duration?: number; // in seconds closeable?: boolean; buttons?: Array<{ label: string; callback: Function; ariaLabel?: string; classes?: Array<string> | string; autofocus?: boolean; }>; force?: boolean; // defaults to true classes?: Array<string> | string; autofocus?: boolean; // defaults to true }
// toast { title: string; message: string; closeable?: boolean; icon?: string; // svg or img duration?: number; // in seconds classes?: string[]; autofocus?: boolean; // defaults to true buttons?: Array<{ label: string; callback: Function; ariaLabel?: string; classes?: Array<string> | string; autofocus?: boolean; }>; timer?: "vertical" | "horizontal" | null; // defaults to null }
Apply your own CSS styles and animations to the notification.
<snackbar-component> <p>Notification message</p> <snackbar-actions> <button>Action</button> <close-button> <svg /> </close-button> </snackbar-actions> </snackbar-component>
<toaster-component> <toast-component> <i> <svg /> </i> <copy-wrapper> <h3>Title</h3> <p>Notification message</p> <toast-actions> <button>Action</button> </toast-actions> </copy-wrapper> <button> <svg /> </button> </toast-component> </toaster-component>
snackbar-component { display: inline-flex; align-items: center; justify-content: space-between; position: fixed; border-radius: 0.25rem; background-color: #333; box-shadow: 0 3px 5px -1px rgba(51, 51, 51, 0.15), 0 6px 10px 0 rgba(51, 51, 51, 0.15), 0 1px 18px 0 rgba(51, 51, 51, 0.15); color: rgba(255, 255, 255, 0.87); min-width: 350px; max-width: 90vw; transform: scale(0.87); opacity: 0; z-index: 1000; transform-origin: center; animation: notificationPop 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; } snackbar-component[position][position~="bottom"] { bottom: 1rem; } snackbar-component[position][position~="top"] { top: 1rem; } snackbar-component[position][position~="center"] { left: 50%; transform: translate(-50%) scale(0.87); transform-origin: left center; animation: notificationPopCenter 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; } snackbar-component[position][position~="left"] { left: 1.5rem; } snackbar-component[position][position~="right"] { right: 1.5rem; } snackbar-component p { padding: 0.875rem 1rem; line-height: 1.618; font-size: 0.875rem; margin: 0; } snackbar-component snackbar-actions { display: inline-flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; padding-right: 0.5rem; } snackbar-component snackbar-actions button { user-select: none; font-weight: 500; font-size: 0.875rem; height: 2.5rem; line-height: 2.5rem; padding: 0 0.5rem; color: #4a99ff; text-transform: uppercase; text-align: center; cursor: pointer; position: relative; background: transparent; border: none; outline: none; } snackbar-component snackbar-actions button:not(:last-child) { margin-right: 0.5rem; } snackbar-component snackbar-actions button:hover::before { transform: scale(1); background-color: rgba(74, 153, 255, 0.15); transition: transform 175ms cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 75ms ease; } snackbar-component snackbar-actions button:active::before { background-color: rgba(74, 153, 255, 0.3); transition: background-color 75ms ease-in-out; } snackbar-component snackbar-actions button::before { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.25rem; background-color: transparent; transform-origin: center; transform: scale(0.3); transition: all 75ms ease-out; } snackbar-component snackbar-actions close-button { width: 2.5rem; height: 2.5rem; display: inline-flex; justify-content: center; align-items: center; flex-flow: column wrap; color: rgba(255, 255, 255, 0.87); cursor: pointer; user-select: none; transition: color 75ms ease-in-out; position: relative; } snackbar-component snackbar-actions close-button:hover { color: #fff; } snackbar-component snackbar-actions close-button:hover::before { transform: scale(1); background-color: rgba(255, 255, 255, 0.1); transition: transform 175ms cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 75ms ease; } snackbar-component snackbar-actions close-button:active { color: #fff; } snackbar-component snackbar-actions close-button:active::before { background-color: rgba(255, 255, 255, 0.15); transition: background-color 75ms ease-in-out; } snackbar-component snackbar-actions close-button svg { width: 20px; height: 20px; position: relative; margin: 0; } snackbar-component snackbar-actions close-button::before { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: inline-block; content: ""; border-radius: 50%; background-color: transparent; transform-origin: center; transform: scale(0.3); transition: all 75ms ease-out; } @keyframes notificationPopCenter { from { opacity: 0; transform: scale(0.87) translateX(-50%); } to { opacity: 1; transform: scale(1) translateX(-50%); } } @keyframes notificationPop { from { opacity: 0; transform: scale(0.87); } to { opacity: 1; transform: scale(1); } }
Changelog:
v3.1.1 (01/16/2022)
- Bugfix
v3.1.0 (03/27/2021)
- improved snackbar rendering performance
- improved toast rendering performance
- reduced package size
v3.0.0 (03/26/2021)
- snackbar notifications now default to force: true
- closeable snackbar and toaster notifications now default autofocus: true
- new append() function
- bugs fixed
v2.1.1 (01/21/2021)
- Fixed: snackbar undefined element when forced bug
v2.1.0 (11/09/2020)
- Added ability to autofocus buttons
- Added role attributes to snackbar and toast notifications
- Added: toast notifications can contain buttons
- Added: toast notification timers
- Fixed: toast notifications now stack with newest notifications appearing at the bottom (better UX/expected notification behavior)
v2.0.3 (09/16/2020)
- Fixed snackbar button without class bug
v2.0.1 (04/24/2020)
- Refactored elements into web components
- Renamed NotificationManager() to Notifier()
- Fixed: toast components use node.inserBefore() instead of forcing the column-reverse CSS property to render in the correct order
- Removed deprecated position value
- Removed notify() export — replaced with snackbar()
v1.2.2 (04/18/2020)
- Fixed toaster notification null check bug
- Fixed toaster notification close button bug
v1.2.0 (04/05/2020)
- toaster notification toast() creation
- renames existing notification funciton to snackbar()
v1.1.0 (02/12/2020)
- Added support for applying dynamic notificaiton classes
- Added support for dynamic button classes
- Added generic material design based CSS stylesheet
v1.0.2 (01/10/2020)
- new notify export providing access to a global notification manager
v1.0.0 (12/16/2019)
- Added TypeScript declaration file for Notify.js
- Updated to ES2019
- Removed support for IE 11
- Removed minimum notification duration
v0.2.0 (09/30/2019)
- Reworked library to use window.requestAnimationFrame instead of setTimeout in order to increase performance
- Notifications are queued and will be displayed in the order they’re submitted
- Added positioning information/values
- Updated HTML structure to allow for more robust layouts/designs
- Removed the 10 second maximum notification duration