typescriptintermediate

useFullscreen Hook

Toggle fullscreen mode on an element using the Fullscreen API with state tracking.

typescriptPress ⌘/Ctrl + Shift + C to copy

import { useState, useCallback, useEffect, RefObject } from 'react';

export function useFullscreen<T extends HTMLElement>(ref: RefObject<T | null>) {
  const [isFullscreen, setIsFullscreen] = useState(false);

  const enter = useCallback(async () => {
    try {
      await ref.current?.requestFullscreen();
    } catch { /* ignore */ }
  }, [ref]);

  const exit = useCallback(async () => {
    try {
      await document.exitFullscreen();
    } catch { /* ignore */ }
  }, []);

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

  useEffect(() => {
    const handler = () => setIsFullscreen(!!document.fullscreenElement);
    document.addEventListener('fullscreenchange', handler);
    return () => document.removeEventListener('fullscreenchange', handler);
  }, []);

  return { isFullscreen, enter, exit, toggle };
}