How to enable implement fullscreen mode with Reactjs? - reactjs

Question

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

Answer 1

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.

Answer 2

I can recommend you this package react-full-screen