use-battery-status (use-battery-status)
A React hook to access system battery information via the Battery Status API
v0.1.0
Usage
import { use-battery-status } from "@/hooks"1"use client";
2
3import React from "react";
4
5import { Badge } from "@/components/ui/badge";
6import {
7 Card,
8 CardContent,
9 CardDescription,
10 CardFooter,
11 CardHeader,
12 CardTitle,
13} from "@/components/ui/card";
14
15import { cn } from "@/lib/utils";
16
17import { useBatteryStatus } from "@/components/hooks/use-battery-status";
18
19export function UseBatteryStatusDemo() {
20 const { supported, level, charging, chargingTime, dischargingTime } =
21 useBatteryStatus();
22
23 if (!supported) {
24 return (
25 <Card className="max-w-sm w-full">
26 <CardHeader>
27 <CardTitle>useBatteryStatus</CardTitle>
28 <CardDescription>
29 Battery Status API is not supported in this browser.
30 </CardDescription>
31 </CardHeader>
32 </Card>
33 );
34 }
35
36 const percentage = Math.round(level * 100);
37
38 return (
39 <Card className="max-w-sm w-full">
40 <CardHeader>
41 <CardTitle>useBatteryStatus</CardTitle>
42 <CardDescription>
43 Live system battery status using the Battery Status API.
44 </CardDescription>
45 </CardHeader>
46 <CardContent className="space-y-4">
47 <div>
48 <span className="font-medium">Level:</span>{" "}
49 <span className="text-lg font-semibold">{percentage}%</span>
50 </div>
51 <div className="w-full">
52 <progress
53 className="w-full h-2 rounded bg-gray-200"
54 value={percentage}
55 max={100}
56 />
57 </div>
58 <Badge
59 variant="secondary"
60 className={cn(
61 "w-fit",
62 charging
63 ? "bg-green-500/30 border-green-500 text-green-300"
64 : "bg-red-500/30 border-red-500 text-red-300"
65 )}
66 >
67 {charging ? "Charging" : "Discharging"}
68 </Badge>
69 <CardFooter>
70 <p className="text-sm text-muted-foreground">
71 Charging Time: {chargingTime}s, Discharging Time: {dischargingTime}s
72 </p>
73 </CardFooter>
74 </CardContent>
75 </Card>
76 );
77}
78Install
npx wkkkis-hooks add use-battery-statusOptions
| Name | Type | Default | Description |
|---|---|---|---|
| supported | boolean | — | Whether the Battery Status API is supported |
| level | number | — | Current battery level (0 to 1) |
| charging | boolean | — | Whether the battery is currently charging |
| chargingTime | number | — | Time in seconds until the battery is fully charged |
| dischargingTime | number | — | Time in seconds until the battery is fully discharged |
| The | — | — | hook returns an object with the following properties |
Features
- Real-time battery information with automatic updates via the Battery Status API events.
- Graceful fallback when the API is not supported.
- Simple and declarative interface for easy integration.
Files in this hook
| Source | Destination |
|---|---|
| files/use-battery-status.ts | src/hooks/use-battery-status.ts |