useBattery

Track battery status.

https://www.shaktools.com/shak-hooks
Sensor

API Reference

Installation

terminal
pnpm add @shak-hooks/usehooks
import.ts
import { useBattery } from "@shak-hooks/usehooks";
Source: packages/react/src/useBattery.ts

Signature

signature.ts
export function useBattery()

Parameters

No parameters.

Returns

unknown

Exported Types

types.ts
1export interface BatteryState {
2 charging: boolean;
3 chargingTime: number;
4 dischargingTime: number;
5 level: number;
6}

Implementation

use-battery.ts
1import { useState, useEffect } from "react";
2
3interface BatteryState {
4 supported: boolean;
5 loading: boolean;
6 level: number | null;
7 charging: boolean | null;
8 chargingTime: number | null;
9 dischargingTime: number | null;
10}
11
12export function useBattery(): BatteryState {
13 const [state, setState] = useState<BatteryState>({
14 supported: true,
15 loading: true,
16 level: null,
17 charging: null,
18 chargingTime: null,
19 dischargingTime: null,
20 });
21
22 useEffect(() => {
23 if (!(navigator as any).getBattery) {
24 setState((s) => ({ ...s, supported: false, loading: false }));
25 return;
26 }
27
28 let battery: any;
29
30 const handleChange = () => {
31 setState({
32 supported: true,
33 loading: false,
34 level: battery.level,
35 charging: battery.charging,
36 chargingTime: battery.chargingTime,
37 dischargingTime: battery.dischargingTime,
38 });
39 };
40
41 (navigator as any).getBattery().then((b: any) => {
42 battery = b;
43 handleChange();
44 b.addEventListener("levelchange", handleChange);
45 b.addEventListener("chargingchange", handleChange);
46 b.addEventListener("chargingtimechange", handleChange);
47 b.addEventListener("dischargingtimechange", handleChange);
48 });
49
50 return () => {
51 if (battery) {
52 battery.removeEventListener("levelchange", handleChange);
53 battery.removeEventListener("chargingchange", handleChange);
54 battery.removeEventListener("chargingtimechange", handleChange);
55 battery.removeEventListener("dischargingtimechange", handleChange);
56 }
57 };
58 }, []);
59
60 return state;
61}

Advertisement

Google Ads

Usage

example.tsx
1import { useBattery } from "@shak-hooks/usehooks";
2
3const result = useBattery();
4// result: unknown
5// Use values directly (React state).

Let‘s do great work together

Empowering creators with free, high-performance AI, SEO, and developer tools. Join thousands of users optimizing their workflow with Shak-Tools.

Tools10+ Free
UsersGlobal

Stay in the loop

Join our newsletter for the latest AI tools and updates.

ShakTools
© 2025 Shaktools. All Rights Reserved.Privacy Policy