[](https://www.npmjs.com/package/@toluade/use-fullscreen)
npm install @toluade/use-fullscreen
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 the containerId is required.
``js`
const { toggleFullscreen } = useFullscreen(containerId);
- toggleFullscreen(e: MouseEvent | null) => voidid
- This function toggles the element whose is passed to the useFullscreen hook between fullscreen mode and normal mode.
`js`
const { exitFullscreen } = useFullscreen(containerId);
- exitFullscreen() => void
- This function exits fullscreen mode.
`js`
const { isFullscreen } = useFullscreen(containerId);
- isFullscreen: booleantrue
- Returns when in fullscreen mode and false when in normal mode
npm
`sh npm`
npm i @toluade/use-fullscreen --save
yarn
`sh yarn`
yarn add @toluade/use-fullscreen
`js
import useFullScreen from "use-fullscreen";
const containerId = "container";
function App() {
const { toggleFullScreen, isFullScreen, exitFullscreen } =
useFullScreen(containerId);
return (
Fullscreen mode
:Normal mode
}`js
import useFullScreen from "use-fullscreen";const containerId = "container";
function App() {
const { toggleFullScreen, isFullScreen, exitFullscreen } =
useFullScreen(containerId);
return (
toggleFullscreen(e)}>
{isFullscreen ? "Fullscreen Mode" : "Normal mode"}
);
}
``| Prop | Description | Type |
| ----------- | ---------------------------------------------- | ------ |
| containerId | The id of the element to be set to fullscreen. | string |
MIT © Toluade