Using the Fullscreen API with React

Making something fullscreen in browsers is surprisingly easy. All you have to do is call requestFullscreen() on any DOM node. For example:

document.body.requestFullscreen();

Note that the element that you choose to put in fullscreen matters. Only it and its children will be visible so if you want to open popups, tooltips, modals, etc. while in fullscreen, make sure they’re descendants of the fullscreen node.

Once you want to exit fullscreen, it’s just as easy:

document.exitFullscreen();

Of course, users can also exit fullscreen simply by pressing their escape key. If you need to know when that happens, you can listen to the fullscreenchange event. Combined with document.fullscreenElement, you have all the pieces to know when something is going fullscreen or exiting it.

document.addEventListener('fullscreenchange', (event) => {
  if (document.fullscreenElement) {
    // We’re going fullscreen
  } else {
    // We’re exiting fullscreen
  }
});

As you can see, this event is triggered when going into or out of fullscreen mode.

Styling when in fullscreen

You’ll probably want to style things a little differently when going fullscreen. Fortunately, browsers already provide a handy :fullscreen pseudo-class, letting you adjust your styles without the need to manage conditional class names on your elements:

// Fix the toolbar to the top when in fullscreen
:fullscreen .toolbar {
  position: fixed;
  top: 0;
}

How to use this in React

If you use React, you can call requestFullscreen and exitFullscreen in reaction to user events as you normally would. You might also find this useEffect hook quite useful:

const [isFullscreen, setIsFullscreen] = React.useState(false);

// Watch for fullscreenchange
React.useEffect(() => {
  function onFullscreenChange() {
    setIsFullscreen(Boolean(document.fullscreenElement));
  }
        
  document.addEventListener('fullscreenchange', onFullscreenChange);

  return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
}, []);

fullscreen and iframes

If you want to let the content of an iframe be put in fullscreen, then you must first give it permission to do so. You can check if fullscreen is enabled with document.fullscreenEnabled.

allow=”fullscreen” vs allowfullscreen

You might’ve seen both. There’s no harm in using both if you want. In practice, allow=”fullscreen” can be more restrictive by specifying an allowlist while allowfullscreen allows all origins. If both are present, allow=”fullscreen” will take precedence.

Check out the excellent Fullscreen API documentation or MDN's handy guide if you need to dive deeper into any of the elements presented here.