the-react-hooks
HooksuseBatteryStatus

useBatteryStatus()

The useBatteryStatus() hook provides real-time information about the device's battery level and charging status.

Import

typescript
import { useBatteryStatus } from 'the-react-hooks';

Usage

Loading battery status...
Component.tsx
import { useBatteryStatus } from 'the-react-hooks';

export const Component = () => {
  const { percentage, charging } = useBatteryStatus();

  return (
    <div>
      <p>Battery Level: {percentage}%</p>
      <p>Is Battery Charging: {charging ? "True" : "False"}</p>
    </div>
  );
}

API

This hook does not accept any arguments.
Returns an object with the following properties:
  • supported – boolean true if the Battery Status API is supported.
  • loading – boolean true while fetching the initial battery status.
  • level – number | null battery level value between 0.0 and 1.0.
  • percentage – number | null battery level percentage (0-100).
  • charging – boolean | null true if the battery is currently charging.
  • chargingTime – number | null remaining time in seconds until fully charged.
  • dischargingTime – number | null remaining time in seconds until discharged.
PrevioususeAsyncNextuseClipboard