How to use fullscreenchange in React?

Asked

Viewed 37 times

1

I need to perform an action when the user leaves full screen browser mode (by pressing ESC). I have verified that the event called is the fullscreenchange but I couldn’t get it to work on React.

I’m using Functional Components. Follows my implementation

useEffect(() => {
    if (videoElement) {
      document.addEventListener('fullscreenchange', action, false);
      document.addEventListener('mozfullscreenchange', action, false);
      document.addEventListener('MSFullscreenChange', action, false);
      document.addEventListener('webkitfullscreenchange', action, false);
    }
}, [videoElement]);
javascript react

  • if the change is taking place videoElement, and if it is true you add the events, would these events not have to be loaded in the component creation?

  • So. I added another Istener within this condition. document.addEventListener("keydown", getKeyBoardInteration, false); this Listening is working properly, but the fullscreenchange nay.

1 answer

0


The element that should receive the Listening is the element that received the requestFullScreen, which in this case is not the document, but a specific element.

Adding the Listening in the element reference all works correctly.

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.