Rehooks
Content

useBattery

A custom hook to retrieve battery information and status.

useBattery

Usage

Component.tsx
import { useBattery } from "~/hooks/useBattery";
 
function Component() {
  const batteryState = useBattery();
 
  return (
    <div>
      <h1>Battery State</h1>
      <p>Battery level: {batteryState.level}</p>
      <p>Battery charging: {batteryState.charging ? "yes" : "no"}</p>
      <p>Battery charging time: {batteryState.chargingTime}</p>
      <p>Battery discharging time: {batteryState.dischargingTime}</p>
    </div>
  );
}

API

useBattery

function useBattery(): BatteryState;

Returns

NameTypeDescription
batteryStateBatteryStateAn object with battery state properties.
batteryState.supportedbooleanIndicates if the Battery API is supported.
batteryState.loadingbooleanTrue while fetching initial battery data.
batteryState.levelnumber | nullBattery level as a decimal (0.0 to 1.0), or null if unavailable.
batteryState.chargingboolean | nullWhether the battery is currently charging, or null if unavailable.
batteryState.chargingTimenumber | nullEstimated time in seconds until fully charged, or null if unavailable.

On this page