useFullscreen

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

Powered by

screenfull

Installation

npx shadcn@latest add @redpanda/use-fullscreen

pnpm dlx shadcn@latest add @redpanda/use-fullscreen

yarn dlx shadcn@latest add @redpanda/use-fullscreen

bunx shadcn@latest add @redpanda/use-fullscreen

nubx shadcn@latest add @redpanda/use-fullscreen

aube dlx shadcn@latest add @redpanda/use-fullscreen

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