I have tried onFullScreenChange in React but it doesn't work, so I have to use addEventListener for my case, I wonder whether fullscreenchange event is supported in React ? Thanks for your help

I have tried onFullScreenChange in React but it doesn't work, so I have to use addEventListener for my case, I wonder whether fullscreenchange event is supported in React ? Thanks for your help

• javascript
• reactjs

2 Answers 2

There is no onFullScreenChange, you can see all supported events in related docs.

You can check an example of useFullscreenStatus implementation to use it in custom hook:

export default function useFullscreenStatus(elRef) {
  const [isFullscreen, setIsFullscreen] = React.useState(
    document[getBrowserFullscreenElementProp()] != null
  );

  const setFullscreen = () => {
    if (elRef.current == null) return;

    elRef.current
      .requestFullscreen()
      .then(() => {
        setIsFullscreen(document[getBrowserFullscreenElementProp()] != null);
      })
      .catch(() => {
        setIsFullscreen(false);
      });
  };

  React.useLayoutEffect(() => {
    document.onfullscreenchange = () =>
      setIsFullscreen(document[getBrowserFullscreenElementProp()] != null);

    return () => {document.onfullscreenchange = undefined};
  });

  return [isFullscreen, setFullscreen];
}

function getBrowserFullscreenElementProp() {
  if (typeof document.fullscreenElement !== "undefined") {
    return "fullscreenElement";
  } else if (typeof document.mozFullScreenElement !== "undefined") {
    return "mozFullScreenElement";
  } else if (typeof document.msFullscreenElement !== "undefined") {
    return "msFullscreenElement";
  } else if (typeof document.webkitFullscreenElement !== "undefined") {
    return "webkitFullscreenElement";
  } else {
    throw new Error("fullscreenElement is not supported by this browser");
  }
}

It looks like there's nothing in React repo with that identifier.