Reactで、トースト通知を表示する仕組みを作る方法

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
    <Toaster />
  </StrictMode>,
);

// トーストの一覧を持つ小さなストア（React の外からも toast() を呼べる）
export type ToastType = 'success' | 'error';
export type Toast = {
  id: number;
  message: string;
  type: ToastType;
  duration: number | null; // null なら自動では閉じない
};

const MAX_TOASTS = 3;
let toasts: Toast[] = [];
let nextId = 1;
const listeners = new Set<() => void>();

function emit() {
  for (const listener of listeners) listener();
}

export function subscribe(listener: () => void) {
  listeners.add(listener);
  return () => {
    listeners.delete(listener);
  };
}

export function getSnapshot() {
  return toasts;
}

export function toast(
  message: string,
  options: { type?: ToastType; duration?: number | null } = {},
) {
  const id = nextId++;
  const item: Toast = {
    id,
    message,
    type: options.type ?? 'success',
    duration: options.duration === undefined ? 4000 : options.duration,
  };
  // 新しい配列を作る（同じ配列を書き換えると、React が変化に気づかない）
  toasts = [...toasts, item].slice(-MAX_TOASTS);
  emit();
  return id;
}

export function dismiss(id: number) {
  toasts = toasts.filter((t) => t.id !== id);
  emit();
}

表示： [ '通知 3×', '通知 4×', '通知 5×' ]

import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
import { createPortal } from 'react-dom';
import { dismiss, getSnapshot, subscribe, type Toast } from './toast-store';

export function Toaster() {
  const toasts = useSyncExternalStore(subscribe, getSnapshot);
  // 通知が0件のときも、読み上げ用の領域は置いたままにする
  return createPortal(
    <section className="toaster" aria-label="通知" aria-live="polite">
      <ol>
        {toasts.map((t) => (
          <ToastItem key={t.id} toast={t} />
        ))}
      </ol>
    </section>,
    document.body,
  );
}

- region "通知":
  - list

- region "通知":
  - list:
    - listitem:
      - text: 保存しました
      - button "通知を閉じる": ×

export function ToastItem({ toast }: { toast: Toast }) {
  const [paused, setPaused] = useState(false);
  const remaining = useRef(toast.duration);

  useEffect(() => {
    if (paused || remaining.current === null) return;
    const startedAt = Date.now();
    const timer = setTimeout(() => dismiss(toast.id), remaining.current);
    return () => {
      clearTimeout(timer);
      // 止めた時点で、残り時間を減らしておく
      if (remaining.current !== null) remaining.current -= Date.now() - startedAt;
    };
  }, [paused, toast.id]);

  return (
    <li
      className={`toast toast-${toast.type}`}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      onFocus={() => setPaused(true)}
      onBlur={() => setPaused(false)}
    >
      <span>{toast.message}</span>
      <button type="button" aria-label="通知を閉じる" onClick={() => dismiss(toast.id)}>
        ×
      </button>
    </li>
  );
}

出てから消えるまで：4.00 秒

出してから 6.05 秒後（マウスを乗せたまま）： [ '通知 1×' ]
乗せるまでの時間：1.05 秒、マウスを外してから消えるまで：2.96 秒

出してから 6.03 秒後（フォーカスしたまま）： [ '通知 1×' ]
フォーカスするまでの時間：1.02 秒、フォーカスを外してから消えるまで：2.98 秒

マウスを外した時刻：出してから 2.07 秒、消えた時刻：出してから 5.05 秒

import { toast } from './toast-store';

// コンポーネントではない、ふつうの関数からも通知を出せる
export async function saveNote(text: string) {
  const res = await fetch('/api/notes', { method: 'POST', body: text });
  if (!res.ok) {
    toast(`保存できませんでした（${res.status}）`, { type: 'error', duration: null });
    return;
  }
  toast('保存しました');
}

8 秒後の表示： [ '保存できませんでした（400）×' ]

setTimeout(fn, Infinity) が呼ばれるまで：0.1 ms

閉じるボタンの位置でクリックを受け取る要素（elementFromPoint）： DIALOG
閉じるボタンのクリック：できない（ locator.click: Timeout 2000ms exceeded. ）
dialog を開いたまま、出てから消えるまで：4.00 秒

useEffect(() => {
  const el = ref.current;
  if (!el) return;
  if (el.matches(':popover-open')) el.hidePopover();
  // 開き直すと、あとから開いた dialog よりも手前に来る
  if (toasts.length > 0) el.showPopover();
}, [toasts]);