useFullscreen

Controls and tracks the fullscreen state of an element, with programmatic toggle support.

Usage

Basic usage example to quickly see how the useFullscreen works.

"use client";
import { useFullscreen } from "@/hooks/use-fullscreen";
import { MinimizeIcon, MaximizeIcon } from "@/icons/*";
import { Button } from "@/ui/button";

export function UseFullscreenDemo() {
  const { fullscreen, toggle } = useFullscreen();

  function fS<T1, T2>(t1: T1, t2: T2) {
    return fullscreen ? (t1 as T1) : (t2 as T2);
  }

  return (
    <Button onClick={toggle} title={fS("Minimize", "Maximize")} variant="outline" size="icon" color={fS("red", "blue")}>
      {fS(<MinimizeIcon strokeWidth={2.25} />, <MaximizeIcon strokeWidth={2.25} />)}
    </Button>
  );
}

With Ref

Given an element that you'd like to present in fullscreen mode (such as a <video>, <img>, for example), you can present it in fullscreen mode by calling its requestFullscreen() method.

Click image to view fullscreen

"use client";
import { Stack } from "@/ui/stack";
import { Button } from "@/ui/button";
import { Typography } from "@/ui/typography";
import { MinimizeIcon, MaximizeIcon } from "@/icons/*";
import { useFullscreen } from "@/hooks/use-fullscreen";

export function UseFullscreenDemo() {
  const { ref: refImage, toggle: onClickImage } = useFullscreen();

  return (
    <Stack align="center">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        ref={refImage}
        src="/...asset.jpg"
        alt="oeri logo"
        width={96}
        height={96}
        onClick={onClickImage}
        className="mt-8 size-24 rounded-lg border bg-black"
      />
      <Typography prose="span">Click image to view fullscreen</Typography>
    </Stack>
  );
}

It's not guaranteed that the element will be put into full screen mode. If permission to enter full screen mode is granted, the returned Promise will resolve and the element will receive a fullscreenchange event to let it know that it's now in full screen mode. If permission is denied, the promise is rejected and the element receives a fullscreenerror event instead. If the element has been detached from the original document, then the document receives these events instead.

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

use-fullscreen.ts