JAVASCRIPT
Toggle Fullscreen Mode with useFullscreen Hook
Create a custom React hook, useFullscreen, to easily toggle fullscreen mode for any DOM element, enhancing multimedia or presentation experiences.
import { useState, useRef, useCallback } from 'react';
const useFullscreen = () => {
const elementRef = useRef();
const [isFullscreen, setIsFullscreen] = useState(false);
const toggleFullscreen = useCallback(() => {
const element = elementRef.current;
if (!element) return;
if (document.fullscreenElement) {
// Exit fullscreen
document.exitFullscreen().then(() => setIsFullscreen(false));
} else {
// Enter fullscreen
element.requestFullscreen().then(() => setIsFullscreen(true));
}
}, []);
// Listen for fullscreen change events to keep state in sync
// This handles cases where fullscreen is exited by ESC key or other means
const handleFullscreenChange = useCallback(() => {
setIsFullscreen(!!document.fullscreenElement);
}, []);
// Attach and detach event listener
useEffect(() => {
document.addEventListener('fullscreenchange', handleFullscreenChange);
return () => {
document.removeEventListener('fullscreenchange', handleFullscreenChange);
};
}, [handleFullscreenChange]);
return [elementRef, isFullscreen, toggleFullscreen];
};
export default useFullscreen;
How it works: The `useFullscreen` hook provides functionality to easily toggle an element into and out of fullscreen mode. It returns a `ref` to attach to your target element, a `boolean` state indicating if the element is currently in fullscreen, and a `toggleFullscreen` function. It leverages the Fullscreen API (`requestFullscreen`, `exitFullscreen`, `fullscreenElement`). An `useEffect` hook with a 'fullscreenchange' event listener keeps the `isFullscreen` state synchronized, even if the user exits fullscreen using the ESC key or other browser controls, ensuring a robust user experience.