Sensors

useBattery

Reactive wrapper around the Battery Status API. Provides real-time battery charging status and level information.

Demo

Battery

Not Supported

Real-time battery status via the Battery Status API.

Level

100%

Charging

Charge Time

Discharge Time

Usage

Hook
Scope

import { 
const useBattery: () => UseBatteryReturn
useBattery } from "@usels/web";

function 
function BatteryStatus(): JSX.Element
BatteryStatus() {
  const { 
const isSupported$: ReadonlyObservable<boolean>
isSupported$, 
const charging$: ReadonlyObservable<boolean>
Whether the battery is charging
charging$, 
const level$: ReadonlyObservable<number>
Battery level (0 to 1)
level$, 
const chargingTime$: ReadonlyObservable<number>
Time in seconds until the battery is fully charged
chargingTime$, 
const dischargingTime$: ReadonlyObservable<number>
Time in seconds until the battery is fully discharged
dischargingTime$ } = 
function useBattery(): UseBatteryReturn
Framework-agnostic reactive battery status.
Resolves navigator.getBattery() lazily inside onMount and syncs
charging / chargingTime / dischargingTime / level observables
with the BatteryManager instance. Listeners are torn down on unmount.
SSR-safe: falls back to defaults (charging=false, level=1) when
navigator or getBattery is unavailable.
useBattery();

  return (
    <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Supported: {
const isSupported$: ReadonlyObservable<boolean>
isSupported$.
ImmutableObservableBase<boolean>.get(trackingType?: TrackingType | GetOptions): {}
get() ? "Yes" : "No"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Charging: {
const charging$: ReadonlyObservable<boolean>
Whether the battery is charging
charging$.
ImmutableObservableBase<boolean>.get(trackingType?: TrackingType | GetOptions): {}
get() ? "Yes" : "No"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Level: {
any
Math.
any
round(
const level$: ReadonlyObservable<number>
Battery level (0 to 1)
level$.
ImmutableObservableBase<number>.get(trackingType?: TrackingType | GetOptions): {}
get() * 100)}%</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Charging Time: {
const chargingTime$: ReadonlyObservable<number>
Time in seconds until the battery is fully charged
chargingTime$.
ImmutableObservableBase<number>.get(trackingType?: TrackingType | GetOptions): {}
get()}s</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Discharging Time: {
const dischargingTime$: ReadonlyObservable<number>
Time in seconds until the battery is fully discharged
dischargingTime$.
ImmutableObservableBase<number>.get(trackingType?: TrackingType | GetOptions): {}
get()}s</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
    </
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

import { createBattery } from "@usels/web";

function BatteryStatus() {
  "use scope"
  const { isSupported$, charging$, level$, chargingTime$, dischargingTime$ } = createBattery();

  return (
    <div>
      <p>Supported: {isSupported$.get() ? "Yes" : "No"}</p>
      <p>Charging: {charging$.get() ? "Yes" : "No"}</p>
      <p>Level: {Math.round(level$.get() * 100)}%</p>
      <p>Charging Time: {chargingTime$.get()}s</p>
      <p>Discharging Time: {dischargingTime$.get()}s</p>
    </div>
  );
}

Type

Returns

UseBatteryReturn

Name	Type	Description
`charging$`	`ReadonlyObservable<boolean>`	Whether the battery is charging
`chargingTime$`	`ReadonlyObservable<number>`	Time in seconds until the battery is fully charged
`dischargingTime$`	`ReadonlyObservable<number>`	Time in seconds until the battery is fully discharged
`level$`	`ReadonlyObservable<number>`	Battery level (0 to 1)
`isSupported$`	`ReadonlyObservable<boolean>`	-

Source

View on GitHub