JAVASCRIPT

React `useFullscreen` Hook for Toggling Fullscreen Mode

Implement a custom React `useFullscreen` hook to easily toggle fullscreen mode for any DOM element, enhancing user experience for media players, galleries, or presentations.

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

function useFullscreen() {
  const [isFullscreen, setIsFullscreen] = useState(false);
  const elementRef = useRef();

  const toggleFullscreen = useCallback(async () => {
    if (!elementRef.current) return;

    if (document.fullscreenElement) {
      // Exit fullscreen
      await document.exitFullscreen();
      setIsFullscreen(false);
    } else {
      // Enter fullscreen
      await elementRef.current.requestFullscreen();
      setIsFullscreen(true);
    }
  }, []);

  // Listen for fullscreen change events to keep state in sync
  const handleFullscreenChange = useCallback(() => {
    setIsFullscreen(!!document.fullscreenElement);
  }, []);

  // Add/remove event listeners for fullscreen change
  useEffect(() => {
    document.addEventListener('fullscreenchange', handleFullscreenChange);
    return () => {
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
    };
  }, [handleFullscreenChange]);

  return [elementRef, isFullscreen, toggleFullscreen];
}

// Example Usage:
// function FullscreenableDiv() {
//   const [ref, isFullscreen, toggleFullscreen] = useFullscreen();

//   return (
//     <div
//       ref={ref}
//       style={{
//         backgroundColor: isFullscreen ? 'black' : 'lightblue',
//         color: isFullscreen ? 'white' : 'black',
//         padding: '20px',
//         margin: '10px',
//         border: '1px solid gray',
//         height: isFullscreen ? '100vh' : '200px',
//         width: '100%'
//       }}
//     >
//       <h1>This is a fullscreenable element</h1>
//       <p>Current fullscreen status: {isFullscreen ? 'ACTIVE' : 'INACTIVE'}</p>
//       <button onClick={toggleFullscreen}>
//         {isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
//       </button>
//     </div>
//   );
// }

How it works: The `useFullscreen` hook provides functionality to easily toggle an HTML element into and out of fullscreen mode. It returns a `ref` to attach to the target element, a boolean `isFullscreen` state, and a `toggleFullscreen` function. It also listens to the native `fullscreenchange` event to ensure its internal state remains consistent with the browser's fullscreen status, improving reliability.

React `useFullscreen` Hook for Toggling Fullscreen Mode

Need help integrating this into your project?