useFullscreen

About

Use Fullscreen API to make beautiful and immersive experience. Present desired content using the entire user's screen. Commonly used in browser games or other applications using canvases.

Example

import React, { useRef } from "react";
import { useFullscreen } from "rooks";

export default function UseFullscreenTest() {
  const fullscreenContainerRef = useRef<Element>(null);
  const {
    isFullscreenAvailable,
    isFullscreenEnabled,
    toggleFullscreen,
  } = useFullscreen({ target: fullscreenContainerRef });

  return (
    <>
      <div ref={fullscreenContainerRef}>
        {isFullscreenAvailable ? (
          <button onClick={toggleFullscreen}>
            {isFullscreenEnabled ? 'Disable fullscreen' : 'Enable fullscreen'}
          </button>
        ) : (
          <p>Fullscreen API is not available.</p>
        )}
      </div>
      <div>
       <p>Other content which won't be visible while in fullscreen mode...</p>
      </div>
    </>
  );
}

Arguments

An object with the following optional properties:

Argument value	Type	Description
options.target	React.RefObject<Element>	React's ref to DOM node which should be present in fullscreen mode
options.onChange	(event: Event) => void	Callback function to be called on fullscreenchange event
options.onError	(event: Event) => void	Callback function to be called on fullscreenerror event
options.requestFullscreenOptions	FullscreenOptions	requestFullscreen options as defined here

If the target property is not specified, the whole document will be rendered in fullscreen mode.

Returns

Returns an object with following properties:

Property Name	Type	Description
isFullscreenAvailable	boolean	Whether the Fullscreen API is available
isFullscreenEnabled	boolean	Whether the fullscreen is enabled
fullscreenElement	`Element	null`
enableFullscreen	() => Promise<void>	Enable the fullscreen
disableFullscreen	() => Promise<void>	Disable the fullscreen
toggleFullscreen	() => Promise<void>	Toggle the fullscreen

Sidenote

• Before using Fullscreen API, one should check if it is available using isFullscreenAvailable property. Otherwise, all method calls will result in an error.
• If the target is an <iframe>, it must have the allowfullscreen attribute applied to it.
• All methods should be called while responding to a user interaction or a device orientation change. Otherwise, such operations will result in an error (eg., you cannot enable the fullscreen on component render using the useEffect hook).

Join the community!

Join our discord server! You can click the floating discord icon at the bottom right of the screen and chat with us!