A React hook that allows toggling between fullscreen mode and normal mode in a web application. The useFullscreen hook returns an object containing the following:
- toggleFullscreen
- exitFullscreen
- isFullscreen
Note: When screen lock is supported, the screen stays awake when in fullscreen mode.
-
containerId: string- This is the
idof the element you want to set as fullscreen. Please note that thecontainerIdis required.
- This is the
const { toggleFullscreen } = useFullscreen(containerId);-
toggleFullscreen(e: MouseEvent | null) => void- This function toggles the element whose
idis passed to theuseFullscreenhook between fullscreen mode and normal mode.
- This function toggles the element whose
const { exitFullscreen } = useFullscreen(containerId);-
exitFullscreen() => void- This function exits fullscreen mode.
const { isFullscreen } = useFullscreen(containerId);-
isFullscreen: boolean- Returns
truewhen in fullscreen mode andfalsewhen in normal mode
- Returns
npm
npm i @toluade/use-fullscreen --saveyarn
yarn add @toluade/use-fullscreenimport useFullScreen from "use-fullscreen";
const containerId = "container";
function App() {
const { toggleFullScreen, isFullScreen, exitFullscreen } =
useFullScreen(containerId);
return (
<div id={containerId}>
<button onClick={toggleFullScreen}>Toggle Fullscreen</button>
{isFullScreen ? <p>Fullscreen mode</p> : <p>Normal mode</p>}
<button onClick={exitFullscreen}>Exit Fullscreen</button>
</div>
);
}import useFullScreen from "use-fullscreen";
const containerId = "container";
function App() {
const { toggleFullScreen, isFullScreen, exitFullscreen } =
useFullScreen(containerId);
return (
<div id={containerId} onDoubleClick={(e) => toggleFullscreen(e)}>
<p>{isFullscreen ? "Fullscreen Mode" : "Normal mode"}</p>
</div>
);
}| Prop | Description | Type |
|---|---|---|
| containerId | The id of the element to be set to fullscreen. | string |
MIT © Toluade