CODEWITHSUNDEEP
reactjshtml5-fullscreen
Abdulbosid
Abdulbosid

Reputation: 374

How to enable implement fullscreen mode with Reactjs?

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

Upvotes: 3

Views: 19600

Answers (2)

Declan
Declan

Reputation: 61

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

  1. 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>
  1. 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.

Upvotes: 5

Smbat Poghosyan
Smbat Poghosyan

Reputation: 809

I can recommend you this package react-full-screen

Upvotes: 5

Related Questions