useBattery

A hook to access battery status information.

Overview

useBattery tracks the device's battery level and charging status using the Battery Status API.

[!WARNING] Browser Support & Privacy: The Battery Status API is deprecated and not supported in many modern browsers (like Safari and Firefox). in Chrome/Edge, it may return fixed values (e.g., 100% level, charging) to prevent user fingerprinting. Use this hook only for progressive enhancement.

Demo

Hardware API

Power Status

Visualizes battery level and charging state.
(Note: Some browsers hide real battery data for privacy)

Simulation Mode

Level100%

API Reference

function useBattery(): BatteryState

Returns

Name	Type	Description
`supported`	`boolean`	Whether the browser supports the Battery API.
`loading`	`boolean`	Initial fetching state.
`level`	`number \| null`	Battery level (0.0 to 1.0).
`charging`	`boolean \| null`	Whether the device is currently charging.

Usage Example

import { useBattery } from 'react-hooks-ts'
 
function BatteryStatus() {
  const { level, charging } = useBattery()
 
  return (
    <div>
      Battery: {(level * 100).toFixed(0)}%
      {charging ? ' (Charging)' : ''}
    </div>
  )
}