How to enable implement fullscreen mode with Reactjs?

Question

Is there a way to implement fullscreen API in the React component functions?

Do you mean to emit `F11` event ? https://stackoverflow.com/questions/7179535/set-window-to-fullscreen-real-fullscreen-f11-functionality-by-javascript — Revansiddh, Jun 14 '19 at 11:53

score 4 · Answer 1 · answered Jun 17 '21 at 02:24

You can refer @chiragrupani/fullscreen-react package. It supports both class components and hooks/function components. Also, it supports allowing multiple elements to enter full screen. It's usage is simple as:

Install: npm i @chiragrupani/fullscreen-react

Add button/icon which triggers full screen. You can also make it to toggle between entering and exiting full screen.

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

Wrap the element that you want to enter fullscreen with FullScreen Component provided by npm package as shown below:

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

For hooks, the code is similar:

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>
    </>
  );
}

PS: I am not author of this library, but I am using it in my production site.

score 3 · Accepted Answer · answered Jun 14 '19 at 13:45

3

I can recommend you this package react-full-screen

answered Jun 14 '19 at 13:45

Smbat Poghosyan

719
7
20

How to enable implement fullscreen mode with Reactjs?

2 Answers2