useFullscreen

[jacobrask]

Returns the current fullscreen state, and a toggle function if fullscreen is available and enabled in the browser.

import { useEffect, useState } from 'react';

const doc = document;

const changeEvent = [
  'fullscreenchange',
  'webkitfullscreenchange',
  'mozfullscreenchange',
].find(name => `on${name}` in doc);

const fullscreenEnabled =
  doc.fullscreenEnabled !== false &&
  doc.webkitFullscreenEnabled !== false &&
  doc.mozFullScreenEnabled !== false &&
  changeEvent;

const requestFullscreen = (el = doc.documentElement) => {
  const req = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen;
  if (req) {
    req.call(el);
  }
};

const exitFullscreen = () => {
  const exit = doc.exitFullscreen || doc.webkitExitFullscreen || doc.mozCancelFullScreen;
  if (exit) {
    exit.call(doc);
  }
};

const isBrowserFullscreen = () =>
  !!(
    doc.fullscreenElement ||
    doc.webkitFullscreenElement ||
    doc.mozFullScreenElement ||
    doc.webkitIsFullScreen ||
    doc.mozFullScreen
  );

const toggleFullscreen = el => {
  if (isBrowserFullscreen()) {
    exitFullscreen();
  } else {
    requestFullscreen(el);
  }
};

export default function useFullscreen() {
  const [isFullscreen, setState] = useState(isBrowserFullscreen());
  useEffect(() => {
    if (!fullscreenEnabled) return;
    const handleFullscreenChange = () => setState(isBrowserFullscreen());
    doc.addEventListener(changeEvent, handleFullscreenChange);
    return () => {
      doc.removeEventListener(changeEvent, handleFullscreenChange);
    };
  }, []);
  return [isFullscreen, fullscreenEnabled ? toggleFullscreen : undefined];
}