Toast Notification Queue with a useToast Hook and Context Provider in React

import { useCallback, useEffect, useReducer, useRef } from "react";
import { createPortal } from "react-dom";
import { ToastContext, toastReducer, type ToastVariant } from "./ToastContext";
import { ToastViewport } from "./ToastViewport";

export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [toasts, dispatch] = useReducer(toastReducer, []);
  const timers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());

  const dismiss = useCallback((id: string) => {
    const handle = timers.current.get(id);
    if (handle) {
      clearTimeout(handle);
      timers.current.delete(id);
    }
    dispatch({ type: "REMOVE", id });
  }, []);

  const push = useCallback(
    (message: string, opts?: { variant?: ToastVariant; duration?: number }) => {
      const id = crypto.randomUUID();
      const duration = opts?.duration ?? 4000;
      dispatch({
        type: "ADD",
        toast: { id, message, variant: opts?.variant ?? "info", duration },
      });
      timers.current.set(
        id,
        setTimeout(() => dismiss(id), duration)
      );
      return id;
    },
    [dismiss]
  );

  useEffect(() => {
    const active = timers.current;
    return () => {
      active.forEach(clearTimeout);
      active.clear();
    };
  }, []);

  return (
    <ToastContext.Provider value={{ toasts, push, dismiss }}>
      {children}
      {createPortal(<ToastViewport toasts={toasts} onDismiss={dismiss} />, document.body)}
    </ToastContext.Provider>
  );
}

import { useContext } from "react";
import { ToastContext, type ToastContextValue } from "./ToastContext";

export function useToast(): ToastContextValue {
  const ctx = useContext(ToastContext);
  if (!ctx) {
    throw new Error("useToast must be used within a <ToastProvider>");
  }
  return ctx;
}

import type { Toast } from "./ToastContext";

interface ViewportProps {
  toasts: Toast[];
  onDismiss: (id: string) => void;
}

function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) {
  return (
    <div role="status" className={`toast toast--${toast.variant}`}>
      <span className="toast__message">{toast.message}</span>
      <button
        type="button"
        className="toast__close"
        aria-label="Dismiss notification"
        onClick={() => onDismiss(toast.id)}
      >
        ×
      </button>
    </div>
  );
}

export function ToastViewport({ toasts, onDismiss }: ViewportProps) {
  if (toasts.length === 0) return null;
  return (
    <div className="toast-viewport" aria-live="polite" aria-relevant="additions">
      {toasts.map((toast) => (
        <ToastItem key={toast.id} toast={toast} onDismiss={onDismiss} />
      ))}
    </div>
  );
}