fullscreen-toggle/dist/index.esm.js

A lightweight utility to toggle fullscreen mode in web applications. Works with all JavaScript frameworks including React, Angular, Vue, and vanilla JS.

/**
 * Toggles fullscreen mode for web applications
 * @param goFullScreen - true to enter fullscreen, false to exit fullscreen
 * @returns Promise<boolean> - resolves to true if successful, false otherwise
 */
function toggleFullScreen(goFullScreen) {
    return new Promise((resolve) => {
        try {
            if (goFullScreen) {
                const elem = document.documentElement;
                if (elem.requestFullscreen) {
                    elem.requestFullscreen().then(() => resolve(true)).catch(() => resolve(false));
                }
                else if (elem.webkitRequestFullscreen) {
                    elem.webkitRequestFullscreen(); // Safari
                    resolve(true);
                }
                else if (elem.msRequestFullscreen) {
                    elem.msRequestFullscreen(); // IE11
                    resolve(true);
                }
                else {
                    resolve(false);
                }
            }
            else {
                if (document.exitFullscreen) {
                    document.exitFullscreen().then(() => resolve(true)).catch(() => resolve(false));
                }
                else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen(); // Safari
                    resolve(true);
                }
                else if (document.msExitFullscreen) {
                    document.msExitFullscreen(); // IE11
                    resolve(true);
                }
                else {
                    resolve(false);
                }
            }
        }
        catch (error) {
            resolve(false);
        }
    });
}
/**
 * Checks if the browser is currently in fullscreen mode
 * @returns boolean - true if in fullscreen, false otherwise
 */
function isFullScreen() {
    return !!(document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement);
}
/**
 * Checks if fullscreen API is supported by the browser
 * @returns boolean - true if supported, false otherwise
 */
function isFullScreenSupported() {
    const elem = document.documentElement;
    return !!(elem.requestFullscreen ||
        elem.webkitRequestFullscreen ||
        elem.msRequestFullscreen);
}
/**
 * Adds an event listener for fullscreen changes
 * @param callback - function to call when fullscreen state changes
 * @returns function to remove the event listener
 */
function onFullScreenChange(callback) {
    const handler = () => callback(isFullScreen());
    // Add listeners for all browser variants
    document.addEventListener('fullscreenchange', handler);
    document.addEventListener('webkitfullscreenchange', handler);
    document.addEventListener('msfullscreenchange', handler);
    // Return cleanup function
    return () => {
        document.removeEventListener('fullscreenchange', handler);
        document.removeEventListener('webkitfullscreenchange', handler);
        document.removeEventListener('msfullscreenchange', handler);
    };
}

export { toggleFullScreen as default, isFullScreen, isFullScreenSupported, onFullScreenChange, toggleFullScreen };