use-fullscreen/esm/useFullscreen.js

Fullscreen hook for React

import { useEffect, useState } from 'react';
const doc = document;
const changeEvent = [
    'fullscreenchange',
    'webkitfullscreenchange',
    'mozfullscreenchange',
    'MSFullscreenChange',
].find(name => `on${name}` in doc);
const fullscreenEnabled = changeEvent &&
    doc.fullscreenEnabled !== false &&
    doc.webkitFullscreenEnabled !== false &&
    doc.mozFullScreenEnabled !== false &&
    doc.msFullscreenEnabled !== false;
function requestFullscreen(el = doc.documentElement) {
    const req = el.requestFullscreen ||
        el.webkitRequestFullscreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullscreen;
    return req.call(el);
}
function exitFullscreen() {
    const exit = doc.exitFullscreen ||
        doc.webkitExitFullscreen ||
        doc.mozCancelFullScreen ||
        doc.msExitFullscreen;
    return exit.call(doc);
}
function isBrowserFullscreen() {
    return !!(doc.fullscreen ||
        doc.fullscreenElement ||
        doc.webkitFullscreenElement ||
        doc.mozFullScreenElement ||
        doc.msFullscreenElement ||
        doc.webkitIsFullScreen ||
        doc.mozFullScreen);
}
/**
 * Request fullscreen for element, or exit fullscreen if browser
 * is already in fullscreen.
 *
 * @param el defaults to `document.documentElement`
 *
 * @returns some modern browsers will return a promise
 */
function toggleFullscreen(el) {
    if (isBrowserFullscreen()) {
        return exitFullscreen();
    }
    else {
        return requestFullscreen(el);
    }
}
/**
 * Returns the current fullscreen state, and a toggle function if fullscreen is
 * available and enabled in the browser.
 */
export default function useFullscreen() {
    const [isFullscreen, setState] = useState(isBrowserFullscreen());
    useEffect(() => {
        function handleFullscreenChange() {
            setState(isBrowserFullscreen());
        }
        if (fullscreenEnabled) {
            doc.addEventListener(changeEvent, handleFullscreenChange);
            return () => {
                doc.removeEventListener(changeEvent, handleFullscreenChange);
            };
        }
    }, []);
    return [isFullscreen, fullscreenEnabled ? toggleFullscreen : undefined];
}