useFullscreen

v0.0.14testeddemo

Reactive Fullscreen API for an element (or the document element). Handles vendor-prefixed fallbacks for request/exit/state detection and syncs isFullscreen from fullscreenchange events. SSR-safe.

Source Tests

Examples

const el = useTemplateRef('el');
const { isFullscreen, enter, exit, toggle } = useFullscreen(el);

// Fullscreen the whole page
const { toggle } = useFullscreen();

Demo

Loading demo…

Signature

export function useFullscreen(
  target?: MaybeComputedElementRef,
  options: UseFullscreenOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`target`?	`MaybeComputedElementRef`	—	Element to display fullscreen (ref, getter, or component instance). Defaults to `document.documentElement`
`options`?	`UseFullscreenOptions`	`{}`	Options (`document`, `autoExit`)

Returns

UseFullscreenReturn{ isSupported, isFullscreen, enter, exit, toggle }

Property	Type	Default	Description
`isSupported`	`ComputedRef<boolean>`	—	Whether the Fullscreen API is supported for the target element
`isFullscreen`	`ShallowRef<boolean>`	—	Whether the target element is currently in fullscreen mode
`enter`	`() => Promise<void>`	—	Request fullscreen mode for the target element
`exit`	`() => Promise<void>`	—	Exit fullscreen mode
`toggle`	`() => Promise<void>`	—	Toggle fullscreen mode for the target element