useBattery

Hook to monitor device battery status using the Battery Status API.

Usage

import React from "react";
import { useBattery } from 'vhooks';

const BatteryDemo: React.FC = () => {
  const battery = useBattery();

  if (!battery.supported) {
    return <div>Your browser does not support the Battery Status API.</div>;
  }

  if (battery.loading) {
    return <div>Loading battery status...</div>;
  }

  return (
    <div>
      <h2>Battery Status</h2>
      <p>
        Level:{" "}
        {battery.level !== null
          ? `${(battery.level * 100).toFixed(0)}%`
          : "N/A"}
      </p>
      <p>Charging: {battery.charging ? "Yes" : "No"}</p>
      <p>
        Charging Time:{" "}
        {battery.chargingTime !== null
          ? `${battery.chargingTime} seconds`
          : "N/A"}
      </p>
      <p>
        Discharging Time:{" "}
        {battery.dischargingTime !== null
          ? `${battery.dischargingTime} seconds`
          : "N/A"}
      </p>
    </div>
  );
};

export default BatteryDemo;

Installation

pnpm

pnpm dlx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useBattery.json -e %src%/hooks

npm

npx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useBattery.json -e %src%/hooks

bun

bunx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useBattery.json -e %src%/hooks

yarn

yarn dlx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useBattery.json -e %src%/hooks

API

▸ useBattery(): BatteryState

Hook to monitor device battery status using the Battery Status API.

Returns

BatteryState

Current battery status information.

Type aliases

Ƭ BatteryState: Object

Battery state returned by the useBattery hook.

Type declaration

Name	Type	Description
charging	boolean | null	Whether the device is charging or null if unavailable.
chargingTime	number | null	Time remaining until fully charged, in seconds, or null if unavailable.
dischargingTime	number | null	Time remaining until fully discharged, in seconds, or null if unavailable.
level	number | null	Current battery level (0 to 1) or null if unavailable.
loading	boolean	Whether battery information is still loading.
supported	boolean	Whether the Battery API is supported.

Hook

import { useState, useEffect } from "react";

type BatteryManager = {
    level: number;
    charging: boolean;
    chargingTime: number;
    dischargingTime: number;
    addEventListener(
    type: string,
    listener: EventListener | EventListenerObject | null,
    options?: boolean | AddEventListenerOptions
  ): void;
    removeEventListener(
    type: string,
    listener: EventListener | EventListenerObject | null,
    options?: boolean | EventListenerOptions
  ): void;
};

type BatteryState = {
    supported: boolean;
    loading: boolean;
    level: number | null;
    charging: boolean | null;
    chargingTime: number | null;
    dischargingTime: number | null;
};

type NavigatorWithBattery = Navigator & {
    getBattery: () => Promise<BatteryManager>;
};

export const useBattery = (): BatteryState => {
  const [batteryState, setBatteryState] = useState<BatteryState>({
    supported: false,
    loading: true,
    level: null,
    charging: null,
    chargingTime: null,
    dischargingTime: null,
  });

  useEffect(() => {
    const _navigator = navigator as NavigatorWithBattery;
    let battery: BatteryManager;

    const handleBatteryChange = () => {
      setBatteryState({
        supported: true,
        loading: false,
        level: battery.level,
        charging: battery.charging,
        chargingTime: battery.chargingTime,
        dischargingTime: battery.dischargingTime,
      });
    };

    if (!_navigator.getBattery) {
      setBatteryState((batteryState) => ({
        ...batteryState,
        supported: false,
        loading: false,
      }));
      return;
    }

    _navigator.getBattery().then((_battery) => {
      battery = _battery;
      handleBatteryChange();

      _battery.addEventListener("levelchange", handleBatteryChange);
      _battery.addEventListener("chargingchange", handleBatteryChange);
      _battery.addEventListener("chargingtimechange", handleBatteryChange);
      _battery.addEventListener("dischargingtimechange", handleBatteryChange);
    });

    return () => {
      if (!battery) return;
      battery.removeEventListener("levelchange", handleBatteryChange);
      battery.removeEventListener("chargingchange", handleBatteryChange);
      battery.removeEventListener("chargingtimechange", handleBatteryChange);
      battery.removeEventListener("dischargingtimechange", handleBatteryChange);
    };
  }, []);

  return batteryState;
};