---
title: useFullscreen
description: Toggle browser fullscreen and track whether the document is currently fullscreen.
icon: maximize
---

<PoweredBy packages={[
  { name: 'screenfull', url: 'https://github.com/sindresorhus/screenfull' },
]} />

### Installation

```package-install
npx shadcn@latest add @redpanda/use-fullscreen
```

`useFullscreen` wraps [screenfull](https://github.com/sindresorhus/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

```tsx showLineNumbers
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. |