Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Hooks
useFullscreen
useFetch

Handles HTTP requests with built-in loading and error states.

useGeoLocation

Provides real-time access to user geolocation data.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

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.

oeri logoClick 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>
  );
}

API References

  • mdn

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