@use-qwik-hooks/battery v0.0.1

use-battery hook

Qwik sensor hook that tracks battery status.

Note: current BatteryManager API state is obsolete.
Although it may still work in some browsers, its use is discouraged since it could be removed at any time.

Install

npm i @qwik-use/battery

yarn add @qwik-use/battery

pnpm i @qwik-use/battery

bun i @qwik-use/battery

Usage

import { component$ } from "@builder.io/qwik";
import { useBattery } from "@qwik-use/battery";
export default component$(() => {
  const batterySig = useBattery();

  return (
    <div>
      {!batterySig.value.isSupported && (
        <div>
          <strong>Battery sensor</strong>: <span>not supported</span>
        </div>
      )}

      {batterySig.value.isSupported && !batterySig.value.fetched && (
        <div>
          <strong>Battery sensor</strong>: <span>supported</span> <br />
          <strong>Batt ery state</strong>: <span>fetching</span>
        </div>
      )}

      {batterySig.value.isSupported && batterySig.value.fetched && (
        <div>
          <strong>Battery sensor</strong>:&nbsp;&nbsp; <span>supported</span>{" "}
          <br />
          <strong>Battery state</strong>: <span>fetched</span> <br />
          <strong>Charge level</strong>:&nbsp;&nbsp;{" "}
          <span>{(batterySig.value.level * 100).toFixed(0)}%</span> <br />
          <strong>Charging</strong>:&nbsp;&nbsp; <span>
            {batterySig.value.charging ? "yes" : "no"}
          </span> <br />
          <strong>Charging time</strong>:&nbsp;&nbsp;
          <span>
            {batterySig.value.chargingTime
              ? batterySig.value.chargingTime
              : "finished"}
          </span> <br />
          <strong>Discharging time</strong>:&nbsp;&nbsp;{" "}
          <span>{batterySig.value.dischargingTime}</span>
        </div>
      )}
    </div>
  );
});