Global Actions

Unlike actions, these functions work globally and don’t require useToast(). The Global API provides headless toast functions that can be called from anywhere in your application — inside or outside components.

To use the Global API, you must still render a <ToastProvider> and at least one <Toaster> somewhere in your app. Once these are set up, you can import and call the following functions directly:

import {
  showToast,
  updateToast,
  dismissToast,
  removeToast,
  promiseToast,
  getToastQueue,
  clearToastQueue,
} from "solid-notifications";

Minimal example of using the Global API:

import { showToast, ToastProvider, Toaster } from "solid-notifications";

export default function App() {
  return (
    <ToastProvider>
      <Toaster />

      <button
        onClick={() => {
          showToast("Hello world!", {
            duration: 14000,
          });
        }}
      >
        Show Toast
      </button>
    </ToastProvider>
  );
}

showToast()

The showToast function is used to display a toast notification. It takes a message and an optional configuration object.

import { showToast } from "solid-notifications";

showToast("Hello world!", {
  duration: 14000,
});

Please refer to the notify function for more details on how to use it.

updateToast()

The updateToast function allows you to update an existing toast notification.

import { updateToast } from "solid-notifications";

updateToast({
  id: "toast-id",
  message: "Updated message",
  duration: 5000,
});

Please refer to the update function for more details on how to use it.

dismissToast()

The dismissToast function is used to dismiss toasts.

import { dismissToast } from "solid-notifications";

dismissToast({ id: "toast-id" });

Please refer to the dismiss function for more details on how to use it.

removeToast()

The removeToast function is used to remove a toast.

import { removeToast } from "solid-notifications";

removeToast({ id: "toast-id" });

Please refer to the remove function for more details on how to use it.

promiseToast()

The promiseToast function is used to create a toast that resolves or rejects based on a promise.

import { promiseToast } from "solid-notifications";

promiseToast(
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Promise resolved!");
    }, 2000);
  }),
  {
    pending: "Fetching data...",
    success: (data) => `✅ Success: ${data}`,
    error: (error) => `❌ Error: ${error}`,
  },
);

Please refer to the promise function for more details on how to use it.

getToastQueue()

The getToastQueue function retrieves the current toast queue.

import { getToastQueue } from "solid-notifications";

const queue = getToastQueue();
console.log(queue);

Please refer to the getQueue function for more details on how to use it.

clearToastQueue()

The clearToastQueue function clears the current toast queue.

import { clearToastQueue } from "solid-notifications";
clearToastQueue();

Please refer to the clearQueue function for more details on how to use it.