useFullscreen

See: Fullscreen API.

Demo

INFO

The component render a div with a label to indicate if it is in fullscreen mode or not and two button to enter and exit from fullscreen mode.

Loading demo…

Show source code

import { useFullscreen } from "../../../..";

export const UseFullscreen = () => {
	const [isFullscreen, cbRef, enterFullscreen, exitFullscreen] = useFullscreen();
	return (
		<div ref={cbRef}>
			<div style={{ marginBottom: 16 }}>{isFullscreen ? 'Fullscreen' : 'Not fullscreen'}</div>
			<div>
				<button type="button" onClick={()=>enterFullscreen()}>
					enter Fullscreen
				</button>
				<button type="button" onClick={exitFullscreen} style={{ margin: '0 8px' }}>
					exit Fullscreen
				</button>
			</div>
		</div>
	);
}

Types

UseFullscreenProps

Props accepted by useFullscreen.

Property	Type	Required	Description
onEnter	() => void \| Promise<void>		Callback function for entering fullscreen mode. Can be synchronous or asynchronous.
onChange	(evt: Event) => void		Callback function triggered when the fullscreen state changes.
onExit	() => void \| Promise<void>		Callback function for exiting fullscreen mode. Can be synchronous or asynchronous.

UseFullscreenResult

• @template T Type of the observed DOM element.

Result tuple returned by useFullscreen.

Index	Type	Description
[0]	boolean	true when the element is currently in fullscreen mode.
[1]	RefCallback<T>	Callback ref to attach to the target element.
[2]	(opts?: FullscreenOptions) => Promise<void>	enter — requests fullscreen on the attached element, calling onEnter first if provided.
[3]	() => Promise<void>	exit — exits fullscreen, calling onExit first if provided.