https://github.com/toluade/usefullscreen

A react hook that allows toggling between fullscreen mode and normal mode in a web application.
https://github.com/toluade/usefullscreen

react-hooks reactjs typescript

Last synced: about 1 month ago
JSON representation

A react hook that allows toggling between fullscreen mode and normal mode in a web application.

• Host: GitHub
• URL: https://github.com/toluade/usefullscreen
• Owner: Toluade
• Created: 2024-04-01T19:05:19.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-19T19:23:05.000Z (10 months ago)
• Last Synced: 2024-07-05T06:22:49.410Z (7 months ago)
• Topics: react-hooks, reactjs, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@toluade/use-fullscreen
• Size: 17.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# useFullscreen

[![NPM](https://img.shields.io/npm/v/@toluade/use-fullscreen.svg)](https://www.npmjs.com/package/@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._

### Props

- `containerId: string`

  - This is the `id` of the element you want to set as fullscreen. Please note that the `containerId` is required.

## toggleFullscreen

```js

const { toggleFullscreen } = useFullscreen(containerId);

```

- `toggleFullscreen(e: MouseEvent | null) => void`

  - This function toggles the element whose `id` is passed to the `useFullscreen` hook between fullscreen mode and normal mode.

## exitFullscreen

```js

const { exitFullscreen } = useFullscreen(containerId);

```

- `exitFullscreen() => void`

  - This function exits fullscreen mode.

## isFullscreen

```js

const { isFullscreen } = useFullscreen(containerId);

```

- `isFullscreen: boolean`

  - Returns `true` when in fullscreen mode and `false` when in normal mode

## Install

npm

```sh npm

npm i @toluade/use-fullscreen --save

```

yarn

```sh yarn

yarn add @toluade/use-fullscreen

```

## Example Usage

```js

import useFullScreen from "use-fullscreen";

const containerId = "container";

function App() {

  const { toggleFullScreen, isFullScreen, exitFullscreen } =

    useFullScreen(containerId);

  return (

    


      Toggle Fullscreen

      {isFullScreen ? 
Fullscreen mode
 : 
Normal mode
}

      Exit Fullscreen

    

  );

}

```


```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"}

    

  );

}

```


### Props

| Prop        | Description                                    | Type   |

| ----------- | ---------------------------------------------- | ------ |

| containerId | The id of the element to be set to fullscreen. | string |

## License

MIT © [Toluade](https://github.com/Toluade)