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
id
of the element you want to set as fullscreen. Please note that thecontainerId
is required.
- This is the
const { toggleFullscreen } = useFullscreen(containerId);
-
toggleFullscreen(e: MouseEvent | null) => void
- This function toggles the element whose
id
is passed to theuseFullscreen
hook 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
true
when in fullscreen mode andfalse
when in normal mode
- Returns
npm
npm i @toluade/use-fullscreen --save
yarn
yarn add @toluade/use-fullscreen
import 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