rooks
Version:
Collection of awesome react hooks
60 lines (59 loc) • 1.84 kB
TypeScript
/**
* useSuspenseNavigatorBattery
* @description Suspense-enabled hook for getting battery status information from Navigator Battery API
* @see {@link https://rooks.vercel.app/docs/hooks/useSuspenseNavigatorBattery}
*/
interface BatteryManager extends EventTarget {
readonly charging: boolean;
readonly chargingTime: number;
readonly dischargingTime: number;
readonly level: number;
}
declare global {
interface Navigator {
getBattery?(): Promise<BatteryManager>;
}
}
/**
* Clear cached entry - useful for testing
* @internal
*/
export declare function clearCache(): void;
/**
* Suspense-enabled hook for getting battery status information from Navigator Battery API
*
* This hook will suspend (throw a promise) while the Navigator Battery API
* is fetching battery information. It should be wrapped in a Suspense boundary.
* The hook provides real-time updates when battery status changes.
*
* @returns The BatteryManager object with current battery status information
*
* @throws {Error} When Navigator Battery API is not supported
* @throws {Promise} When data is still loading (for Suspense)
*
* @example
* ```tsx
* function MyComponent() {
* const battery = useSuspenseNavigatorBattery();
*
* return (
* <div>
* <p>Battery Level: {Math.round(battery.level * 100)}%</p>
* <p>Charging: {battery.charging ? 'Yes' : 'No'}</p>
* <p>Charging Time: {battery.chargingTime} seconds</p>
* <p>Discharging Time: {battery.dischargingTime} seconds</p>
* </div>
* );
* }
*
* function App() {
* return (
* <Suspense fallback={<div>Loading battery info...</div>}>
* <MyComponent />
* </Suspense>
* );
* }
* ```
*/
declare function useSuspenseNavigatorBattery(): BatteryManager;
export { useSuspenseNavigatorBattery };