React Battery Level Hook

This challenge asks you to implement a custom React hook, useBattery, that provides real-time battery level information for the user's device. This hook is useful for building applications that can adapt their behavior based on battery status, such as dimming the screen, reducing network activity, or displaying a low battery warning.

Problem Description

You need to create a React hook called useBattery that returns the current battery level as a percentage (0-100) and a boolean indicating whether the device is currently charging. The hook should subscribe to battery status changes and update its state accordingly. It should handle cases where the browser doesn't support the Battery Status API (e.g., some older browsers or environments).

Key Requirements:

• Return Value: The hook should return an array containing two elements:
  • batteryLevel: A number representing the battery level as a percentage (0-100).
  • isCharging: A boolean indicating whether the device is currently charging.
• Subscription: The hook should subscribe to battery events and update the batteryLevel and isCharging state whenever the battery status changes.
• Error Handling: The hook should gracefully handle cases where the navigator.getBattery() method is not available (i.e., the browser doesn't support the Battery Status API). In such cases, it should return batteryLevel as -1 and isCharging as false.
• Cleanup: The hook should unsubscribe from battery events when the component unmounts to prevent memory leaks.

Expected Behavior:

• When the component mounts, the hook should immediately fetch the initial battery level and charging status.
• As the battery level changes, the batteryLevel state should be updated accordingly.
• When the charging status changes, the isCharging state should be updated accordingly.
• If the browser doesn't support the Battery Status API, the hook should return -1 for batteryLevel and false for isCharging.

Edge Cases to Consider:

• Browser doesn't support the Battery Status API.
• Battery level is 0.
• Device is plugged in and charging.
• Device is unplugged while charging.
• Device is on battery power.

Examples

Example 1:

Input: A React component using the useBattery hook.
Output: The component displays the current battery level and charging status.
Explanation: The hook fetches the initial battery level and charging status and updates the component's state accordingly.

Example 2:

Input: A React component using the useBattery hook in a browser that does not support the Battery Status API.
Output: The component displays -1 for batteryLevel and false for isCharging.
Explanation: The hook detects the lack of support and returns default values.

Example 3: (Edge Case)

Input: A React component using the useBattery hook, and the device is plugged in and charging. Then, the device is unplugged.
Output: The component initially displays the charging status as true and a battery level. After unplugging, the component updates the charging status to false and the battery level changes accordingly.
Explanation: The hook correctly handles the change in charging status and updates the component's state.

Constraints

• The hook must be written in TypeScript.
• The hook must use the navigator.getBattery() method to retrieve battery information.
• The hook must handle the case where navigator.getBattery() returns null.
• The hook must not cause memory leaks.
• The hook should be performant and avoid unnecessary re-renders.

Notes

• Consider using the useEffect hook to manage the subscription to battery events and the cleanup function.
• The battery event is fired when the charging status or battery level changes.
• The navigator.getBattery() method returns a BatteryInfo object, which contains the level (percentage) and charging (boolean) properties.
• Remember to handle potential errors gracefully.
• Think about how to best structure the hook to make it reusable and maintainable.