A declarative interface for managing the browser Fullscreen API on a specific DOM element.
Important
Entering fullscreen mode must be triggered by a user gesture (e.g., a click or key press). Browsers will block any programmatic attempt to enter fullscreen without a recent interaction.
Caution
Fullscreen support varies significantly on mobile browsers (especially iOS Safari, where only the video element typically supports native fullscreen).
Installation
bash
Description
The useFullscreen hook abstracts the complexity of the Fullscreen API, providing a reactive state to track whether an element is currently occupying the full screen. It allows consumers to enter, exit, or toggle fullscreen mode easily. It automatically listens for fullscreenchange events to keep the React state in sync with the native browser state.
Parameters
Name
Type
Description
ref
React.RefObject<T>
The ref of the element that should be displayed in fullscreen mode.
Return values
Name
Type
Description
enter
() => Promise<void>
Requests the browser to display the target element in fullscreen.
exit
() => Promise<void>
Exits fullscreen mode for the document.
isFullscreen
boolean
Reactive state indicating if the target element is currently fullscreen.
toggle
() => Promise<void>
Switches between entering and exiting fullscreen based on current state.