DEV Community

Cover image for Using the Fullscreen API with React

Using the Fullscreen API with React

Seth Corker on October 08, 2019

The web is a powerful platform that has more to offer than you might expect. There are many APIs that enrich people's experience of the web allow d...
Read full post
Collapse
 
rompeldunk profile image
Magnus Gule • • Edited

Based on the code from GitHub:

A problem is that the hook isn't reusable with document.onfullscreenchange which is overwritten everytime the hook is called.

Mounting it to the elRef is better so you have have multiple instances.:

useLayoutEffect(() => {
  if (elRef.current != null) {
    const refEl = elRef.current;
    refEl.onfullscreenchange = () =>
      setIsFullscreen(document[getBrowserFullscreenElementProp()] != null);

    return () => (refEl.onfullscreenchange = undefined);
  }
});
Enter fullscreen mode Exit fullscreen mode
Collapse
 
chrisachard profile image
Chris Achard •

Oh, neat! I never realized that was a thing :) Also nice first article in the series - detecting active/inactive is super useful in certain circumstances. Thanks!

Collapse
 
darthknoppix profile image
Seth Corker •

Thanks, I’m glad you liked it. My aim is to try and illuminate some of the less well known Web APIs.