useNetwork

Category

Sensors

Export Size

482 B

Last Changed

5 days ago

Reactive Network status. The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.). This can be used to select high definition content or low definition content based on the user's connection. The entire API consists of the addition of the NetworkInformation interface and a single property to the Navigator interface: Navigator.connection.

Demo

Usage

import { useNetwork } from '@reause/core'

const { isOnline, offlineAt, onlineAt, downlink, downlinkMax, effectiveType, saveData, rtt, type } = useNetwork()

console.log(isOnline)

Type Declarations

export type NetworkType = 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown'

export type NetworkEffectiveType = 'slow-2g' | '2g' | '3g' | '4g' | undefined

export interface NetworkInformation extends EventTarget {
    readonly downlink: number;
    readonly downlinkMax: number;
    readonly effectiveType: NetworkEffectiveType;
    readonly rtt: number;
    readonly saveData: boolean;
    readonly type: NetworkType;
}

export interface UseNetworkOptions extends ConfigurableWindow {
}

export interface UseNetworkReturn {
    isSupported: boolean;
    isOnline: boolean;
    offlineAt: number | undefined;
    onlineAt: number | undefined;
    downlink: number | undefined;
    downlinkMax: number | undefined;
    effectiveType: NetworkEffectiveType | undefined;
    saveData: boolean | undefined;
    rtt: number | undefined;
    type: NetworkType;
}

export function useNetwork(options?: UseNetworkOptions): UseNetworkReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

e4182 - fix(core): resolve useNetwork audit findings (#609)