Skip to main content

useBatteryLevel

This hook returns the device's current battery level as a percentage and whether it is currently charging.

Import​

import { useBatteryLevel } from "~lib/device-information";

It is also published on its own, as ~lib/device-information/use-battery-level.

API​

const { percentage, isCharging } = useBatteryLevel();

Parameters​

This hook takes no parameters.

Return Value​

NameTypeDescription
percentagenumberBattery level as a whole percentage (0 to 100)
isChargingbooleanWhether the device is currently charging

Example​

Lay the reading out yourself with Icon and Display, sized for the box, when DeviceInformation does not fit the design.

import { useBatteryLevel } from "~lib/device-information";
import { Icon, batteryIconName } from "~lib/icon";
import { Display } from "~lib/typography";

const Widget = () => {
  const { percentage, isCharging } = useBatteryLevel();

  return (
    <div className="flex size-full items-center justify-center gap-3">
      <Icon name={batteryIconName(percentage, isCharging)} size={48} />
      <Display size="sm" unit="%" inline>
        {percentage}
      </Display>
    </div>
  );
};

See Also​