useFullscreen

Display an element full-screen

Usage

Live Editor

function Demo() {
  const ref = useRef(null);
  const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }]
    = useFullscreen(ref);
  return (
    <div ref={ref}>
      <div style={{ marginBottom: 16 }}>
        {isFullscreen ? "Fullscreen" : "Not fullscreen"}
      </div>
      <div>
        <button type="button" onClick={enterFullscreen}>
          enterFullscreen
        </button>
        <button
          type="button"
          onClick={exitFullscreen}
          style={{ margin: "0 8px" }}
        >
          exitFullscreen
        </button>
        <button type="button" onClick={toggleFullscreen}>
          toggleFullscreen
        </button>
      </div>
    </div>
  );
};

Result

Loading...

API

useFullScreen

Returns

readonly [boolean, { readonly enterFullscreen: () => void; readonly exitFullscreen: () => void; readonly toggleFullscreen: () => void; readonly isEnabled: boolean; }]: A tuple with the following elements:

• whether the browser is in fullscreen.
• a object：
• enterFullscreen
• exitFullscreen
• toggleFullscreen
• isEnabled: whether the browser support fullscreen

Arguments

Argument	Description	Type	DefaultValue
target	dom element	BasicTarget<Element> (Required)	-
options	optional params	UseFullScreenOptions | undefined	-

UseFullScreenOptions

Property	Description	Type	DefaultValue
onExit	exit callback	() => void	-
onEnter	enter callback	() => void	-

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;