5.0.0 Release

Added

• Sonner notification
• Custom event triggers
• Custom event callbacks

Custom Event Triggers

As of version 5 you can trigger notifications using custom events dispatched on the window.

const event = new CustomEvent("notify:sonner", {
    detail: {
        heading: "Sonner Example",
        message: `Example sonner toast message.`,
    }
});
window.dispatchEvent(event);

The follow events are supported:

• notify:sonner
• notify:alert
• notify:toast
• notify:snackbar

The detail object accepts the same interfaces as the function versions.

Custom Event Callbacks

As of version 5 all callback interfaces support event and eventData properties. When the user interacts with a button a custom event will be fired on the window.

import sonner from "@codewithkyle/notifyjs/sonner";
sonner.push({
    message: "Heading and message are optional.",
    button: {
        label: "Test",
        event: "test-event",
        eventData: "Hi mom!",
    }
});

// received when the user clicks the button within the sonner notification
window.addEventListener("test-event", (e)=>{
    alert(e.detail);
});

v4.1.0

Added

• ability to click-to-close toast

v4.0.0

Added

• new Toaster functionality
• ES Module exports:
  • @codewithkyle/notifyjs/toaster
  • @codewithkyle/notifyjs/snackbar
  • @codewithkyle/notifyjs/notifications

Removed

• common JS support
• custom Notifier support

Refactored

• Toast notifications functionality has been moved to new Notifications export
• Each notification type must be explicitly imported

v3.1.0

Fixed

• improved snackbar rendering performance
• improved toast rendering performance
• reduced package size

v3.0.0

Added

• type declaration files
• new append() function
• alternate CDN version

Fixed

• autofocus bug (#19)
• action button bug (#20)

⚠️ Breaking Changes ⚠️

This update includes two minor breaking changes:

• snackbar notifications now default to force: true
• closeable snackbar and toaster notifications now default autofocus: true

v2.1.1

Fixed

• snackbar undefined element when forced bug

v2.1.0

Added

• ability to autofocus buttons (#14)
• CDN compatible version (ES Module)
• role attributes to snackbar and toast notifications
• toast notifications can contain buttons (#15)
• toast notification timers (#13)
• updated readme

Fixed

• toast notifications now stack with newest notifications appearing at the bottom (better UX/expected notification behavior)

v2.0.3

Fixed

• snackbar button without class string/array bug

Notify.js v2.0.1

Fixed

• typescript declaration files
• toast injection

Notify.js v2.0.0

Added

• 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
• notify() export -- replaced with snackbar()