Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProPut an element, or the page, in full screen with enter, exit and toggle, an isFullscreen flag that follows the Escape key, and a supported flag.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for video players, image viewers, slide decks, charts and maps that benefit from the whole screen.
Do not use it for ordinary modals. iPhone Safari only allows full screen on video elements, so check supported.
import { useFullscreen } from "@/hooks/use-fullscreen"const { ref, isFullscreen, toggle, supported } = useFullscreen<HTMLDivElement>()
<div ref={ref}>...</div>useFullscreen<T extends HTMLElement>(): { ref, isFullscreen, enter, exit, toggle, supported }
| Return | Description |
|---|---|
ref | Callback ref for the element to show full screen. Without it the page element is used. |
isFullscreen | True while that element is the full screen element. Follows Escape and browser UI. |
enter, exit, toggle | Async. Errors (for example not allowed without a user gesture) are caught and returned as false. |
supported | Whether the Fullscreen API exists. |
Call enter and toggle from a click or key handler, since browsers require a user gesture.
Provide a visible button that has a name and exposes state with aria-pressed, keep Escape working (the browser handles it) and keep focus inside the full screen element. Put controls inside that element so they stay available.
The hook ships with renderHook tests (use-fullscreen.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.