fullscreen-react

 


> Allows any html element to enter full screen using Browser API.

Installation

Install the package

``bash
npm i @chiragrupani/fullscreen-react
`

Usage

Use with class component or function component like below:

> Class component example

`tsx
this.setState({isFullScreen: true})}>Go Fullscreen

isFullScreen={this.state.isFullScreen}
onChange={(isFullScreen) => {
this.setState({ isFullScreen });
}}
>




`

> Function component example

`tsx
export default function FSExampleHook() {
let [isFullScreen, setFullScreen] = React.useState(false);

return (
<>
setFullScreen(true)}>Go Fullscreen

isFullScreen={isFullScreen}
onChange={(isFull: boolean) => {
setFullScreen(isFull);
}}
>





);
}
`

If you require entire document in fullscreen instead of any specific element use DocumentFullScreen instead of FullScreen like below. However, there can be atmost one DocumentFullScreen:

`tsx
isFullScreen={this.state.isFullScreen}
onChange={(isFullScreen) => {
this.setState({ isFullScreen });
}}
>




``