Implementing a useFullscreen Hook in React

This challenge asks you to implement a custom React hook, useFullscreen, that manages the fullscreen state of an element. This hook will allow components to easily toggle fullscreen mode on a given element, providing a clean and reusable way to handle fullscreen functionality within React applications. It's a common requirement for media players, presentations, and other interactive experiences.

Problem Description

You need to create a useFullscreen hook that takes a ref to a DOM element as input and returns an object containing:

• isFull: A boolean indicating whether the element is currently in fullscreen mode.
• toggleFullscreen: A function that toggles the fullscreen state of the element.
• exitFullscreen: A function that explicitly exits fullscreen mode for the element.

The hook should utilize the document.fullscreenElement property to determine the current fullscreen state. The toggleFullscreen function should enter fullscreen mode if the element is not already in fullscreen, and exit fullscreen mode if it is. The exitFullscreen function should always attempt to exit fullscreen mode.

Key Requirements:

• The hook must accept a ref to a DOM element.
• The hook must correctly detect and manage the fullscreen state.
• The toggleFullscreen function must toggle the fullscreen state.
• The exitFullscreen function must exit fullscreen mode.
• The hook should handle cases where the element ref is initially null or becomes null later.
• The hook should gracefully handle browser compatibility issues related to fullscreen API.

Expected Behavior:

• When the component mounts, the hook should initialize the isFull state based on whether the element is already in fullscreen.
• Calling toggleFullscreen should enter or exit fullscreen mode as appropriate.
• Calling exitFullscreen should always attempt to exit fullscreen mode.
• The isFull state should update correctly whenever the fullscreen state changes.
• If the element ref is null, the hook should not attempt to enter or exit fullscreen mode and should not throw errors.

Edge Cases to Consider:

• The element ref might be initially null.
• The element ref might become null after the component has mounted.
• The browser might not support the fullscreen API.
• The element might not be able to be made fullscreen (e.g., due to CSS constraints).

Examples

Example 1:

Input: A <div> element with a ref named 'myDivRef'
Output: Initially, isFull is false. Calling toggleFullscreen() enters fullscreen. Subsequent call to toggleFullscreen() exits fullscreen. isFull reflects the current state.
Explanation: The hook correctly toggles the fullscreen state of the div.

Example 2:

Input: A <video> element with a ref named 'videoRef'
Output: Initially, isFull is false. Calling toggleFullscreen() enters fullscreen.  Calling exitFullscreen() exits fullscreen.
Explanation: The hook correctly toggles the fullscreen state of the video element.

Example 3: (Edge Case)

Input: A ref that is initially null and then later assigned to a <div> element.
Output: Initially, isFull is false and no errors are thrown. When the ref is assigned, calling toggleFullscreen() attempts to enter fullscreen on the div.
Explanation: The hook handles the case where the ref is initially null without errors.

Constraints

• The hook must be written in TypeScript.
• The hook should be compatible with modern browsers that support the Fullscreen API.
• The hook should not introduce any unnecessary dependencies.
• The hook should be performant and avoid unnecessary re-renders.
• The element ref passed to the hook must be a valid ref to a DOM element.

Notes

• You can use document.documentElement.requestFullscreen() and document.exitFullscreen() to control fullscreen mode.
• Consider using a useEffect hook to manage the fullscreen state and update the isFull state accordingly.
• Handle potential errors gracefully, especially when dealing with the fullscreen API.
• Think about how to handle the case where the element ref is null or becomes null after the component has mounted. Avoid errors in these scenarios.
• Browser compatibility can be a factor. While the Fullscreen API is widely supported, consider providing a fallback mechanism if necessary (though this is not strictly required for this challenge).