Discussion on: Using the Fullscreen API with React

[Magnus Gule]

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);
  }
});