use-fullscreen hook overview
The use-fullscreen hook allows you to enter/exit fullscreen for a given element using the Fullscreen API. By default, if you don't provide a ref, the hook will target document.documentElement.
hooks/use-fullscreen
8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
useFullscreenElement return type
The useFullscreenElement hook returns an object with three properties: ref (a React.RefCallback that accepts an HTMLElement or null), toggle (an async function that returns Promise<void>), and fullscreen (a boolean indicating whether fullscreen is currently active).
useFullscreenDocument return type
The useFullscreenDocument hook returns an object with two properties: toggle (an async function that returns Promise<void>) and fullscreen (a boolean indicating whether fullscreen is currently active).
useFullscreenElement signature
useFullscreenElement is a generic function with signature: function useFullscreenElement<T extends HTMLElement = any>(): UseFullscreenElementReturnValue<T>. It can be called without arguments and returns a ref object and toggle function for an arbitrary HTML element.
useFullscreenDocument signature
useFullscreenDocument is a function with signature: function useFullscreenDocument(): UseFullscreenDocumentReturnValue. It can be called without arguments and returns a toggle function and fullscreen boolean for the entire document.
use-fullscreen exported types
UseFullscreenElementReturnValue and UseFullscreenDocumentReturnValue types are exported from the @mantine/hooks package and can be imported for type annotations in your application.
Mobile Safari fullscreen limitations
Mobile Safari, especially on iPhone, has limited Fullscreen API support. Fullscreen is only supported for video elements and may not work for arbitrary elements including document.documentElement. The use-fullscreen hook includes Safari-specific fallbacks where possible, but cannot bypass browser or platform restrictions. Entering fullscreen usually requires a direct user interaction such as a button click.
use-fullscreen ref parameter is optional
The use-fullscreen hook accepts an optional ref function that can be passed to an element to act as the fullscreen target. Users should follow best practices to avoid confusing or trapping the end user when implementing fullscreen functionality.