@ananay-nag/web-device-info/dist/index.d.ts

Universal web screen/device info (JS, React, Vue3, Angular, Svelte) with real-time updates

import { OnDestroy, NgZone } from '@angular/core';
import { Observable } from 'rxjs';
import * as svelte_store from 'svelte/store';
import { Ref } from 'vue';

type IDeviceOrientation = "portrait" | "landscape";
type IDeviceInfo = {
    isMobile: boolean;
    isTablet: boolean;
    isDesktop: boolean;
    width: number;
    height: number;
    diagonal: number;
    orientation?: IDeviceOrientation;
    userAgent?: string;
    platform?: string;
    language?: string;
    online?: boolean;
};
interface IDeviceOptions {
    /**
     * Use viewport (innerWidth / innerHeight) instead of screen.*.
     * Recommended for responsive testing (e.g., Chrome devtools).
     */
    useViewport?: boolean;
}

declare class DeviceService implements OnDestroy {
    private zone;
    private subject;
    readonly info$: Observable<IDeviceInfo>;
    private stop;
    constructor(zone: NgZone);
    /** Switch between viewport vs screen mode at runtime if needed */
    setOptions(options: IDeviceOptions): void;
    ngOnDestroy(): void;
}

type angular_DeviceService = DeviceService;
declare const angular_DeviceService: typeof DeviceService;
declare namespace angular {
  export { angular_DeviceService as DeviceService };
}

declare function getDeviceInfo(opts?: IDeviceOptions): IDeviceInfo;
declare function onDeviceChange(callback: (info: IDeviceInfo) => void, opts?: IDeviceOptions): () => void;

declare const js_getDeviceInfo: typeof getDeviceInfo;
declare const js_onDeviceChange: typeof onDeviceChange;
declare namespace js {
  export { js_getDeviceInfo as getDeviceInfo, js_onDeviceChange as onDeviceChange };
}

declare function useDeviceInfo$2(options?: IDeviceOptions): IDeviceInfo;

declare namespace react {
  export { useDeviceInfo$2 as useDeviceInfo };
}

declare function useDeviceInfo$1(options?: IDeviceOptions): {
    subscribe: (this: void, run: svelte_store.Subscriber<IDeviceInfo>, invalidate?: () => void) => svelte_store.Unsubscriber;
    destroy: () => void;
};

declare namespace svelte {
  export { useDeviceInfo$1 as useDeviceInfo };
}

declare function useDeviceInfo(options?: IDeviceOptions): Ref<IDeviceInfo>;

declare const vue3_useDeviceInfo: typeof useDeviceInfo;
declare namespace vue3 {
  export { vue3_useDeviceInfo as useDeviceInfo };
}

export { angular as AngularDeviceInfo, type IDeviceInfo, type IDeviceOptions, js as JSDeviceInfo, react as ReactDeviceInfo, svelte as SvelteDeviceInfo, vue3 as VueDeviceInfo, getDeviceInfo, onDeviceChange };