Imperative Toast Notification System with React Context and Auto-Dismiss

import React, { useCallback, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { ToastContext, Toast } from './ToastContext';

export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [toasts, setToasts] = useState<Toast[]>([]);
  const nextId = useRef(1);

  const remove = useCallback((id: number) => {
    setToasts((prev) => prev.filter((t) => t.id !== id));
  }, []);

  const add = useCallback(
    (toast: Omit<Toast, 'id'>) => {
      const id = nextId.current++;
      setToasts((prev) => [...prev, { ...toast, id }]);
      if (toast.duration && toast.duration > 0) {
        window.setTimeout(() => remove(id), toast.duration);
      }
      return id;
    },
    [remove]
  );

  const value = useMemo(() => ({ toasts, add, remove }), [toasts, add, remove]);

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

function ToastViewport({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: number) => void }) {
  return (
    <div className="toast-viewport" role="region" aria-label="Notifications">
      {toasts.map((t) => (
        <div key={t.id} className={`toast toast--${t.variant}`} role="status">
          <span>{t.message}</span>
          <button type="button" aria-label="Dismiss" onClick={() => onDismiss(t.id)}>
            &times;
          </button>
        </div>
      ))}
    </div>
  );
}

import { useContext, useMemo } from 'react';
import { ToastContext } from './ToastContext';

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

  const { add, remove } = ctx;

  return useMemo(
    () => ({
      success: (message: string, duration = 4000) =>
        add({ variant: 'success', message, duration }),
      error: (message: string, duration = 6000) =>
        add({ variant: 'error', message, duration }),
      info: (message: string, duration = 4000) =>
        add({ variant: 'info', message, duration }),
      dismiss: remove,
    }),
    [add, remove]
  );
}

import React, { useState } from 'react';
import { useToast } from './useToast';

export function SaveButton({ onSave }: { onSave: () => Promise<void> }) {
  const toast = useToast();
  const [saving, setSaving] = useState(false);

  async function handleClick() {
    setSaving(true);
    try {
      await onSave();
      toast.success('Changes saved');
    } catch (err) {
      const message = err instanceof Error ? err.message : 'Something went wrong';
      toast.error(message);
    } finally {
      setSaving(false);
    }
  }

  return (
    <button type="button" disabled={saving} onClick={handleClick}>
      {saving ? 'Saving…' : 'Save'}
    </button>
  );
}