Reactで、要素を全画面表示に切り替える方法

import { useCallback, useState, useSyncExternalStore } from 'react';

// 全画面の出入りは Esc キーなど React の外でも起きるので、
// document.fullscreenElement を外部のストアとして読む
function subscribe(onChange: () => void) {
  document.addEventListener('fullscreenchange', onChange);
  return () => document.removeEventListener('fullscreenchange', onChange);
}
const getSnapshot = () => document.fullscreenElement;
const getServerSnapshot = () => null;

export function useFullscreen<T extends HTMLElement>() {
  // ref.current をレンダー中に読まないよう、要素は state に持つ
  const [element, setElement] = useState<T | null>(null);
  const fullscreenElement = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
  const isFullscreen = element !== null && fullscreenElement === element;

  const enter = useCallback(async () => {
    if (!element) return;
    await element.requestFullscreen();
  }, [element]);

  const exit = useCallback(async () => {
    if (document.fullscreenElement) await document.exitFullscreen();
  }, []);

  const toggle = useCallback(
    () => (isFullscreen ? exit() : enter()),
    [isFullscreen, enter, exit],
  );

  return { ref: setElement, isFullscreen, fullscreenElement, enter, exit, toggle };
}

export function App() {
  const { ref, isFullscreen, fullscreenElement, toggle } = useFullscreen<HTMLDivElement>();
  const [error, setError] = useState('');

  async function handleClick() {
    setError('');
    try {
      await toggle();
    } catch (e) {
      // requestFullscreen() が拒否されると、Promise が reject される
      setError(e instanceof Error ? `${e.name}: ${e.message}` : String(e));
    }
  }

  return (
    <main>
      <div ref={ref} className="viewer">
        {/* グラフなど、全画面で見せたい中身 */}
        <button type="button" onClick={handleClick}>
          {isFullscreen ? '全画面を終了' : '全画面で表示'}
        </button>
      </div>
      {error && <p role="alert">{error}</p>}
    </main>
  );
}

.viewer:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 24px; border: 0; border-radius: 0; }
.viewer:fullscreen .picture { flex: 1; }
.viewer::backdrop { background: #1f2a30; }

最初: 通常 / fullscreenElement: null
  [ページ] fullscreenchange fullscreenElement=viewer
「全画面で表示」を押した: 全画面 / fullscreenElement: div.viewer / ボタン: 全画面を終了
全画面の要素の大きさ: 1280x720（画面 1280x720）
  [ページ] fullscreenchange fullscreenElement=null
「全画面を終了」を押した: 通常 / fullscreenElement: null

「全画面で表示」を押した: 全画面
  [ページ] keydown key=Escape
Playwright で Escape を送った: 全画面 / fullscreenElement: div.viewer
  [ページ] fullscreenchange fullscreenElement=null
Esc キーを押した: 通常 / fullscreenElement: null / ボタン: 全画面で表示

async function handleClick() {
  if (isFullscreen) {
    await document.exitFullscreen();
    setIsFullscreen(false);
  } else {
    await ref.current?.requestFullscreen();
    setIsFullscreen(true);
  }
}

「全画面で表示」を押した: 全画面 / fullscreenElement: div.viewer
  [ページ] fullscreenchange fullscreenElement=null
Esc キーを押した: 全画面 / fullscreenElement: null / ボタン: 全画面を終了
「全画面を終了」を押した: 全画面 / 捕まえていないエラー: TypeError: Failed to execute 'exitFullscreen' on 'Document': Document not active

useEffect(() => {
  ref.current?.requestFullscreen().then(
    () => setResult('全画面になった'),
    (e: Error) => setResult(`${e.name}: ${e.message}`),
  );
}, []);

  [ページ] Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
結果: TypeError: Permissions check failed / fullscreenElement: null

1000ミリ秒後: 全画面になった
4000ミリ秒後: 全画面になった
  [ページ] Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
6000ミリ秒後: TypeError: Permissions check failed

createPortal(<div role="status" className="toast">保存しました</div>, document.body)

お知らせの親: body / お知らせの位置にある要素: viewer

{toast &&
  createPortal(
    <div role="status" className="toast">保存しました</div>,
    // 全画面の間は、全画面の要素の中に出す
    fullscreenElement ?? document.body,
  )}

お知らせの親: div.viewer / お知らせの位置にある要素: toast
  [ページ] fullscreenchange fullscreenElement=null
Esc キーで抜けたあとのお知らせの親: body