DISCLAIMER: It has come to my attention that this article is outdated with the recent and not so recent updates to the react ecosystem. I do however believe it is still useful to see the methodology of how I solved this problem so I do warn you to proceed with caution especially if you are reading this to fulfill some current requirement on a project. The technique may not work or it may work only to be deprecated shortly. As of January 2020 when I first wrote it, it was a perfectly sound method but moving forward I hope you regard this article as more of a relic and not a current implementation.
To find out more about why its outdated have a look at the comment section.
Using react-full-screen package and hooks.
In case you want to include a full-screen button that toggles between full-screen mode and otherwise on your website that uses React you may find that the typical method requestFullscreen() may not be working. Luckily, with some hooks and the handy react-full-screen package that uses the Fullscreen API this should be easy.
All you need to do is first of all,use the useRef()hook to select the element you want to have toggle in and out of full-screen and attach its toggling to a button:
The next thing you want to do is proceed and download the react full screen package using either yarn, npm or any other package manager you choose.
npm i react-full-screen
After which, you can integrate it into your React component and use the useState() hook to have a state property that we will name fullscreenMode to inform our Fullscreen component by setting and resetting its enabled property using our fullScreenMode state property.
And with that you should be good to go.
Hope this helps !
