useFullscreen

Toggle browser fullscreen and track whether the document is currently fullscreen.

Installation

useFullscreen wraps screenfull to expose a reactive isFullscreen flag and a toggleFullscreen action. It stays in sync when the user enters or exits fullscreen by any means (including the Esc key), and no-ops gracefully in browsers where the Fullscreen API is unavailable.

Usage

import { Maximize, Minimize } from "lucide-react";
import { useFullscreen } from "@/hooks/use-fullscreen";
import { Button } from "@/components/redpanda-ui/button";

function FullscreenToggle() {
  const { isFullscreen, toggleFullscreen } = useFullscreen();

  return (
    <Button variant="outline" size="icon" onClick={toggleFullscreen}>
      {isFullscreen ? <Minimize /> : <Maximize />}
    </Button>
  );
}

API

`useFullscreen()`

Takes no arguments.

Returns

Property	Type	Description
`isFullscreen`	`boolean`	Whether the document is currently fullscreen.
`toggleFullscreen`	`() => void`	Enter fullscreen if not, otherwise exit. No-op when unsupported.

Installation

Usage

API

useFullscreen()

On this page

`useFullscreen()`