Exiting Fullscreen in Reactjs

Question

I have a react component which contains an element that I put in fullscreen using the html5 FullScreen API (RequestFullScreen).

For example,

handleFullScreenClick() {
    if (this.refs.myElement.requestFullscreen) {
      this.refs.myElement.requestFullscreen();
    } else if (this.refs.myElement.mozRequestFullScreen) {
      this.refs.myElement.mozRequestFullScreen();
    } else if (this.refs.myElement.webkitRequestFullscreen) {
      this.refs.myElement.webkitRequestFullscreen();
    }
  }

Now, I wish to be able to exit the fullscreen when a button is pressed for example. When I searched the fullscreen API, I saw that the ExitFullScreen function must be called by the document element, which is not accessible to a react component.

Is there any way I can access the document element in my react component in order to call the ExitFullScreen function?

Thanks a lot :)

Answer 1

the document element, which is not accessible to a react component

Don't know who told you this but it's not true (also document is not an element). Document interface is represented by a global object document which is available in any part of your JS code. So you just can use it directly:

handleExitFullScreenClick() {
  document.webkitExitFullscreen()
}