useFullscreen

A React Hook that allows you to use the requestFullscreen API with ease.

Demo

Source
Is `<HTML />` fullscreen:
false
Is element fullscreen:
false

Usage

See API for more details.

Source

Click links below to view source on GitHub.

API

const fs = useFullscreen(elementTarget, options)

ElementTarget

ElementTarget is a union type that represents various kinds of elements that can be targeted.

See ElementTarget or ElementTarget Types for more details.

Options

export type UseFullscreenOptions = {
  /**
   * Automatically exit fullscreen when component is unmounted
   *
   * @defaultValue false
   */
  autoExit?: boolean
}

Returns

export interface UseFullscreenReturns {
  /**
   * Whether the browser supports fullscreen API
   */
  isSupported: boolean
  /**
   * Whether the element is in fullscreen mode
   */
  isFullscreen: boolean
  /**
   * Whether the element itself is in fullscreen mode
   */
  isSelfFullscreen: boolean
  /**
   * Enter fullscreen mode
   */
  enter(): Promise<void>
  /**
   * Exit fullscreen mode
   */
  exit(): Promise<void>
  /**
   * Toggle fullscreen mode
   */
  toggle(): Promise<void>
}