FullScreen hook

use-fullscreen.ts

import { useState, useLayoutEffect } from 'react'

type FullScreenState = boolean
type ToggleFullScreen = () => void

function useFullScreen<E extends HTMLElement>(ref: React.RefObject<E>): [FullScreenState, ToggleFullScreen] {
  const [isFullScreen, setFullScreen] = useState(
    Boolean(document.fullscreenElement),
  )

  useLayoutEffect(() => {
    function handle() {
      setFullScreen(Boolean(document.fullscreenElement))
    }
    document.addEventListener('fullscreenchange', handle)
    return () => document.removeEventListener('fullscreenchange', handle)
  }, [setFullScreen])

  function toggleFullscreen() {
    // eslint-disable-next-line no-unused-expressions
    if (!isFullScreen) ref.current?.requestFullscreen()
    else document.exitFullscreen()
  }

  return [isFullScreen, toggleFullscreen]
}