Guide
Reference
Roadmap
Guide
Reference
Roadmap

useFullscreen

Tags:
Browser
isSupported

A React Hook that allows you to use the requestFullscreen API with ease.

Demo

Source
Is `<HTML />` fullscreen:
false
Is element fullscreen:
false

Usage

See API for more details.

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const fs = useFullscreen(elementTarget, options)

ElementTarget

ElementTarget is a union type that represents various kinds of elements that can be targeted.

See ElementTarget or ElementTarget Types for more details.

Options

export type UseFullscreenOptions = { /** * Automatically exit fullscreen when component is unmounted * * @defaultValue false */ autoExit?: boolean }

Returns

export interface UseFullscreenReturns { /** * Whether the browser supports fullscreen API */ isSupported: boolean /** * Whether the element is in fullscreen mode */ isFullscreen: boolean /** * Whether the element itself is in fullscreen mode */ isSelfFullscreen: boolean /** * Enter fullscreen mode */ enter(): Promise<void> /** * Exit fullscreen mode */ exit(): Promise<void> /** * Toggle fullscreen mode */ toggle(): Promise<void> }