Appearance
useBattery
Reactive Battery Status API
Demo
Usage
tsx
import { useBattery } from '@reause/core'
const { isSupported, charging, chargingTime, dischargingTime, level } = useBattery()| State | Type | Description |
|---|---|---|
| isSupported | boolean | If the Battery Status API is supported in the current browser. |
| charging | boolean | If the device is currently charging. |
| chargingTime | number | The number of seconds until the device becomes fully charged. |
| dischargingTime | number | The number of seconds before the device becomes fully discharged. |
| level | number | A number between 0 and 1 representing the current charge level. |
Browser Support
The Battery Status API has limited browser support. It is currently only available in Chromium-based browsers. Always check isSupported before using the values.
Use-cases
Our applications normally are not empathetic to battery level, we can make a few adjustments to our applications that will be more friendly to low battery users.
- Trigger a special "dark-mode" battery saver theme settings.
- Stop auto playing videos in news feeds.
- Disable some background workers that are not critical.
- Limit network calls and reduce CPU/Memory consumption.
Type Declarations
ts
export interface UseBatteryOptions extends ConfigurableNavigator {
}
export interface UseBatteryReturn {
isSupported: boolean;
charging: boolean;
chargingTime: number;
dischargingTime: number;
level: number;
}
export interface BatteryManager extends EventTarget {
charging: boolean;
chargingTime: number;
dischargingTime: number;
level: number;
}
export interface ConfigurableNavigator {
navigator?: Navigator;
}
export interface UseUserMediaOptions extends ConfigurableNavigator {
enabled?: boolean;
autoSwitch?: boolean;
constraints?: MediaStreamConstraints;
}
export function useBattery(options?: UseBatteryOptions): UseBatteryReturnSource
Contributors
