use-fullscreen-hook/dist/index.js

A React hook to manage fullscreen state

import { useState, useCallback, useEffect } from 'react';
function useFullscreen(elementRef) {
    const [isFullscreen, setIsFullscreen] = useState(false);
    const isElementInFullscreen = () => {
        const doc = document;
        return !!(doc.fullscreenElement ||
            doc.webkitFullscreenElement ||
            doc.mozFullScreenElement ||
            doc.msFullscreenElement);
    };
    const enter = useCallback(() => {
        const element = elementRef.current;
        if (!element)
            return;
        const requestFullscreen = async () => {
            try {
                if (element.requestFullscreen) {
                    await element.requestFullscreen();
                }
                else if (element.webkitRequestFullscreen) {
                    await element.webkitRequestFullscreen();
                }
                else if (element.mozRequestFullScreen) {
                    await element.mozRequestFullScreen();
                }
                else if (element.msRequestFullscreen) {
                    await element.msRequestFullscreen();
                }
                setIsFullscreen(true);
            }
            catch (error) {
                console.error('Failed to enter fullscreen:', error);
            }
        };
        requestFullscreen();
    }, [elementRef]);
    const exit = useCallback(() => {
        const doc = document;
        const exitFullscreen = async () => {
            try {
                if (doc.exitFullscreen) {
                    await doc.exitFullscreen();
                }
                else if (doc.webkitExitFullscreen) {
                    await doc.webkitExitFullscreen();
                }
                else if (doc.mozCancelFullScreen) {
                    await doc.mozCancelFullScreen();
                }
                else if (doc.msExitFullscreen) {
                    await doc.msExitFullscreen();
                }
                setIsFullscreen(false);
            }
            catch (error) {
                console.error('Failed to exit fullscreen:', error);
            }
        };
        exitFullscreen();
    }, []);
    const toggle = useCallback(() => {
        if (isFullscreen) {
            exit();
        }
        else {
            enter();
        }
    }, [isFullscreen, enter, exit]);
    useEffect(() => {
        const handleFullscreenChange = () => {
            setIsFullscreen(isElementInFullscreen());
        };
        // Add event listeners for fullscreen changes
        document.addEventListener('fullscreenchange', handleFullscreenChange);
        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
        document.addEventListener('mozfullscreenchange', handleFullscreenChange);
        document.addEventListener('MSFullscreenChange', handleFullscreenChange);
        // Check initial fullscreen state
        setIsFullscreen(isElementInFullscreen());
        // Cleanup event listeners
        return () => {
            document.removeEventListener('fullscreenchange', handleFullscreenChange);
            document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
            document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
            document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
        };
    }, []);
    return {
        isFullscreen,
        enter,
        exit,
        toggle,
    };
}
export default useFullscreen;