Solid Notifications

A SolidJS Toast Notifications Library

Reactive, customizable toast notifications for SolidJS.

import { useToast } from "solid-notifications";

export default function App() {
  const { notify } = useToast();

  return (
    <div>
      <button onClick={() => notify("🚀 New toast ready to serve!")}>
        Create a Toast!
      </button>
    </div>
  );
}

Or call the showToast function directly:

import { showToast } from "solid-notifications";

export default function App() {
    return (
    <div>
      <button onClick={() => showToast("🚀 New toast ready to serve!")}>
        Create a Toast!
      </button>
    </div>
  );
}

Core Features:

1. Queue Management:

• Toasts can be queued if there isn’t enough space or if a toast limit is reached.
• Signal to read the length of the queue and manage it accordingly.
• Clear queue or clear rendered toasts with a single function call.

2. Reactivity:

• Progress tracking by hooking into the progress signal, usable in the UI for custom progress bars.
• Changes to signals in ToastProvider, Toasters, and Toasts reflect in the UI dynamically.
• Toasts can be updated dynamically with new content or configurations, with all toasts reacting to updated heights.

3. Multiple Toaster Support:

• Supports multiple toasters simultaneously, each with its own state and configuration.

4. Customizability:

• Reverse toast order support.
• Separate configurations for ToastProvider, Toaster and Toast.
• Theme support and styling options. Custom entrance, idle and exit animations.
• Different toast types (default, info, success, warning, error and loading).
• Support for promise based toasts.
• Full control using custom toasts.

5. User Interaction Features:

• Pause timer on onMouseEnter, tab switch, window blur or by user action.
• Swipe-to-dismiss functionality.
• Dismiss toasts on clicking the body or the close button.

6. Timer Control:

• Full control over toast timers, including pausing and resetting.
• Support for infinite duration.

7. Visibility and Tab Management:

• Option to prevent rendering of toasts if the tab is blurred.
• Visibility change event listeners per toaster to manage timers accordingly.

8. Accessibility:

• Built-in ARIA roles for accessibility.

9. Callbacks and Events:

• Custom callbacks for toast exit with detailed reasons (true, false, or custom provided).
• Lifecycle hooks to handle specific events like dismissal or updates.