@chiragrupani/fullscreen-react

fullscreen-react

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

Installation

Install the package

npm i @chiragrupani/fullscreen-react

Usage

Use with class component or function component like below:

Class component example

<button onClick={e => this.setState({isFullScreen: true})}>Go Fullscreen</button>

<FullScreen
    isFullScreen={this.state.isFullScreen}
    onChange={(isFullScreen) => {
        this.setState({ isFullScreen });
    }}
    >
    <div>Fullscreen</div>
</FullScreen>

Function component example

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

  return (
    <>
      <button onClick={(e) => setFullScreen(true)}>Go Fullscreen</button>

      <FullScreen
        isFullScreen={isFullScreen}
        onChange={(isFull: boolean) => {
          setFullScreen(isFull);
        }}
      >
        <div>Fullscreen</div>
      </FullScreen>
    </>
  );
}

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:

<DocumentFullScreen
  isFullScreen={this.state.isFullScreen}
  onChange={(isFullScreen) => {
    this.setState({ isFullScreen });
  }}
>
  <div>Fullscreen</div>
</DocumentFullScreen>