preact-missing-hooks
Version:
A lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps.
107 lines (106 loc) • 3.58 kB
TypeScript
/** Parsed Client Hints from `navigator.userAgentData` when available */
export interface UserAgentDataInfo {
mobile: boolean;
platform: string;
brands: ReadonlyArray<{
brand: string;
version: string;
}>;
}
/** Screen and display metrics from `screen` and `window` */
export interface DeviceScreenInfo {
width: number;
height: number;
availWidth: number;
availHeight: number;
colorDepth: number;
pixelRatio: number;
}
/** Viewport size (`window.innerWidth` / `innerHeight`) */
export interface DeviceViewportInfo {
width: number;
height: number;
}
/** Battery status from the Battery Status API when available */
export interface DeviceBatteryInfo {
charging: boolean;
level: number;
}
/** Detected browser name and version */
export interface DeviceBrowserInfo {
name: string;
version: string;
}
/** Detected operating system name and version */
export interface DeviceOsInfo {
name: string;
version: string;
}
/** Snapshot of device / browser data from native Navigator and related APIs */
export interface DeviceData {
userAgent: string;
language: string;
languages: readonly string[];
platform: string;
/** Detected browser (from Client Hints or user-agent parsing) */
browser: DeviceBrowserInfo;
/** Detected OS (from Client Hints or user-agent parsing) */
os: DeviceOsInfo;
cookieEnabled: boolean;
online: boolean;
hardwareConcurrency?: number;
/** Approximate device RAM in GB (Chrome / some browsers only) */
deviceMemory?: number;
maxTouchPoints: number;
vendor: string;
touch: boolean;
screen: DeviceScreenInfo;
viewport: DeviceViewportInfo;
userAgentData?: UserAgentDataInfo;
reducedMotion: boolean;
colorScheme: "light" | "dark" | "no-preference";
battery?: DeviceBatteryInfo;
}
export interface UseDeviceDataOptions {
/** Fetch battery info when the Battery Status API exists (default: true) */
includeBattery?: boolean;
/** Battery refresh interval in ms (default: 60000) */
batteryPollIntervalMs?: number;
/**
* Request high-entropy Client Hints (`platformVersion`, `fullVersionList`)
* when `navigator.userAgentData` supports it (default: true)
*/
includeHighEntropy?: boolean;
}
/** Parse browser and OS from a user-agent string (sync fallback). */
export declare function parseUserAgent(userAgent: string): {
browser: DeviceBrowserInfo;
os: DeviceOsInfo;
};
/** Reads synchronous device / browser data from Navigator, Screen, and matchMedia. */
export declare function getDeviceData(): DeviceData;
/**
* Extracts device and browser data from native Navigator, Screen, window, and
* matchMedia APIs. Updates on resize, orientation, online/offline, and
* prefers-color-scheme / prefers-reduced-motion changes. Optionally polls the
* Battery Status API when available.
*
* @param options - `includeBattery` (default true), `batteryPollIntervalMs` (default 60000)
* @returns Current {@link DeviceData} snapshot
*
* @example
* ```tsx
* function DevicePanel() {
* const device = useDeviceData();
* return (
* <dl>
* <dt>Browser</dt><dd>{device.browser.name} {device.browser.version}</dd>
* <dt>OS</dt><dd>{device.os.name} {device.os.version}</dd>
* <dt>Language</dt><dd>{device.language}</dd>
* <dt>Viewport</dt><dd>{device.viewport.width}×{device.viewport.height}</dd>
* </dl>
* );
* }
* ```
*/
export declare function useDeviceData(options?: UseDeviceDataOptions): DeviceData;