Author: | codewithkyle |
---|---|
Views Total: | 147 views |
Official Page: | Go to website |
Last Update: | May 30, 2023 |
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:
1. Install and import the notifyjs.
# NPM $ npm install @codewithkyle/notifyjs --save
import { snackbar, toaster, notifications } from '@codewithkyle/notifyjs';
2. Or import the modules from a CDN.
import toaster from "https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@4/dist/toaster.js"; import snackbar from "https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@4/dist/snackbar.js"; import notifications from "https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@4/dist/notifications.js";
3. Create a snackbar notification on the page.
snackbar({ // required snackbar message message: 'Snackbar Notification Message', // optional settings 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 });
4. Create a toast notification on the page.
toaster.push({ // required toast message message: 'Toast Notification Message', // optional settings message: string; duration?: number; // in seconds classes?: string | string[]; });
5. Create a growl-style notification box on the page.
notifications.push({ // required notification message title: 'Notification Title', message: 'Notification Message', // optional settings 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 });
6. Apply your own CSS styles and animations to the notifications.
<!-- Snackbar HTML Structure --> <snackbar-component> <p>Custom notification message</p> <snackbar-actions> <button>Action</button> <button class="close"> <svg /> </button> </snackbar-actions> </snackbar-component>
<!-- Toast HTML Structure --> <toaster-component> <output role="status">Custom toast message.</output> </toaster-component>
<!-- Notification HTML Structure --> <notifications-component> <notification-component> <i> <svg /> </i> <copy-wrapper> <h3>Title</h3> <p>Custom notification message</p> <notification-actions> <button>Action</button> </notification-actions> </copy-wrapper> <button class="close"> <svg /> </button> <notification-timer class="vertical || horizontal"></notification-timer> </notification-component> </notifications-component>
Changelog:
v4.1.0 (05/30/2023)
- Update
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