Use Fullscreen API to make beautiful and immersive experience. Present desired content using the entire user's screen. Commonly used in browser games or other applications using canvases.


import React, { useRef } from "react";
import { useFullscreen } from "rooks";
export default function UseFullscreenTest() {
const fullscreenContainerRef = useRef<Element>(null);
const {
} = useFullscreen({ target: fullscreenContainerRef });
return (
<div ref={fullscreenContainerRef}>
{isFullscreenAvailable ? (
<button onClick={toggleFullscreen}>
{isFullscreenEnabled ? 'Disable fullscreen' : 'Enable fullscreen'}
) : (
<p>Fullscreen API is not available.</p>
<p>Other content which won't be visible while in fullscreen mode...</p>


An object with the following optional properties:

Argument valueTypeDescription
options.targetReact.RefObject<Element>React's ref to DOM node which should be present in fullscreen mode
options.onChange(event: Event) => voidCallback function to be called on fullscreenchange event
options.onError(event: Event) => voidCallback function to be called on fullscreenerror event
options.requestFullscreenOptionsFullscreenOptionsrequestFullscreen options as defined here

If the target property is not specified, the whole document will be rendered in fullscreen mode.


Returns an object with following properties:

Property NameTypeDescription
isFullscreenAvailablebooleanWhether the Fullscreen API is available
isFullscreenEnabledbooleanWhether the fullscreen is enabled
enableFullscreen() => Promise<void>Enable the fullscreen
disableFullscreen() => Promise<void>Disable the fullscreen
toggleFullscreen() => Promise<void>Toggle the fullscreen


  • Before using Fullscreen API, one should check if it is available using isFullscreenAvailable property. Otherwise, all method calls will result in an error.
  • If the target is an <iframe>, it must have the allowfullscreen attribute applied to it.
  • All methods should be called while responding to a user interaction or a device orientation change. Otherwise, such operations will result in an error (eg., you cannot enable the fullscreen on component render using the useEffect hook).

Join the community!

Join our discord server! You can click the floating discord icon at the bottom right of the screen and chat with us!

Powered by vercel