📄 `useNetwork`¶

📊 Analysis Summary¶

Metric	Count
🔧 Functions	2
📦 Imports	8
📐 Interfaces	2
📑 Type Aliases	3

📚 Table of Contents¶

Imports
Functions
Interfaces
Type Aliases

🛠️ File Location:¶

📂 packages/core/useNetwork/index.ts

📦 Imports¶

Name	Source
`ShallowRef`	`vue`
`ConfigurableWindow`	`../_configurable`
`Supportable`	`../types`
`shallowReadonly`	`vue`
`shallowRef`	`vue`
`defaultWindow`	`../_configurable`
`useEventListener`	`../useEventListener`
`useSupported`	`../useSupported`

Functions¶

`useNetwork(options: UseNetworkOptions): UseNetworkReturn`¶

Reactive Network status.

Parameters:

options any: No description

See: https://vueuse.org/useNetwork

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Reactive Network status.
 *
 * @see https://vueuse.org/useNetwork
 * @param options
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

useSupported (from ../useSupported)
shallowRef (from vue)
Date.now
useEventListener (from ../useEventListener)
updateNetworkInformation
shallowReadonly (from vue)

Code

export function useNetwork(options: UseNetworkOptions = {}): UseNetworkReturn {
  const { window = defaultWindow } = options
  const navigator = window?.navigator
  const isSupported = useSupported(() => navigator && 'connection' in navigator)

  const isOnline = shallowRef(true)
  const saveData = shallowRef(false)
  const offlineAt = shallowRef<number | undefined>(undefined)
  const onlineAt = shallowRef<number | undefined>(undefined)
  const downlink = shallowRef<number | undefined>(undefined)
  const downlinkMax = shallowRef<number | undefined>(undefined)
  const rtt = shallowRef<number | undefined>(undefined)
  const effectiveType = shallowRef<NetworkEffectiveType>(undefined)
  const type = shallowRef<NetworkType>('unknown')

  const connection = isSupported.value && (navigator as any).connection

  function updateNetworkInformation() {
    if (!navigator)
      return

    isOnline.value = navigator.onLine
    offlineAt.value = isOnline.value ? undefined : Date.now()
    onlineAt.value = isOnline.value ? Date.now() : undefined

    if (connection) {
      downlink.value = connection.downlink
      downlinkMax.value = connection.downlinkMax
      effectiveType.value = connection.effectiveType
      rtt.value = connection.rtt
      saveData.value = connection.saveData
      type.value = connection.type
    }
  }

  const listenerOptions = { passive: true }

  if (window) {
    useEventListener(window, 'offline', () => {
      isOnline.value = false
      offlineAt.value = Date.now()
    }, listenerOptions)

    useEventListener(window, 'online', () => {
      isOnline.value = true
      onlineAt.value = Date.now()
    }, listenerOptions)
  }

  if (connection)
    useEventListener(connection, 'change', updateNetworkInformation, listenerOptions)

  updateNetworkInformation()

  return {
    isSupported,
    isOnline: shallowReadonly(isOnline),
    saveData: shallowReadonly(saveData),
    offlineAt: shallowReadonly(offlineAt),
    onlineAt: shallowReadonly(onlineAt),
    downlink: shallowReadonly(downlink),
    downlinkMax: shallowReadonly(downlinkMax),
    effectiveType: shallowReadonly(effectiveType),
    rtt: shallowReadonly(rtt),
    type: shallowReadonly(type),
  }
}

Internal helpers¶

Declared inside another function in this file.

`updateNetworkInformation(): void`¶

Returns: void

Calls:

Date.now

Code

function updateNetworkInformation() {
    if (!navigator)
      return

    isOnline.value = navigator.onLine
    offlineAt.value = isOnline.value ? undefined : Date.now()
    onlineAt.value = isOnline.value ? Date.now() : undefined

    if (connection) {
      downlink.value = connection.downlink
      downlinkMax.value = connection.downlinkMax
      effectiveType.value = connection.effectiveType
      rtt.value = connection.rtt
      saveData.value = connection.saveData
      type.value = connection.type
    }
  }

Interfaces¶

`UseNetworkOptions`¶

Interface Code

export interface UseNetworkOptions extends ConfigurableWindow {
}

`NetworkState`¶

Interface Code

export interface NetworkState extends Supportable {
  /**
   * If the user is currently connected.
   */
  isOnline: Readonly<ShallowRef<boolean>>
  /**
   * The time since the user was last connected.
   */
  offlineAt: Readonly<ShallowRef<number | undefined>>
  /**
   * At this time, if the user is offline and reconnects
   */
  onlineAt: Readonly<ShallowRef<number | undefined>>
  /**
   * The download speed in Mbps.
   */
  downlink: Readonly<ShallowRef<number | undefined>>
  /**
   * The max reachable download speed in Mbps.
   */
  downlinkMax: Readonly<ShallowRef<number | undefined>>
  /**
   * The detected effective speed type.
   */
  effectiveType: Readonly<ShallowRef<NetworkEffectiveType | undefined>>
  /**
   * The estimated effective round-trip time of the current connection.
   */
  rtt: Readonly<ShallowRef<number | undefined>>
  /**
   * If the user activated data saver mode.
   */
  saveData: Readonly<ShallowRef<boolean | undefined>>
  /**
   * The detected connection/network type.
   */
  type: Readonly<ShallowRef<NetworkType>>
}

Properties¶

Name	Type	Optional	Description
`isOnline`	`Readonly<ShallowRef<boolean>>`	✗	not shown
`offlineAt`	`Readonly<ShallowRef<number \\| undefined>>`	✗	not shown
`onlineAt`	`Readonly<ShallowRef<number \\| undefined>>`	✗	not shown
`downlink`	`Readonly<ShallowRef<number \\| undefined>>`	✗	not shown
`downlinkMax`	`Readonly<ShallowRef<number \\| undefined>>`	✗	not shown
`effectiveType`	`Readonly<ShallowRef<NetworkEffectiveType \\| undefined>>`	✗	not shown
`rtt`	`Readonly<ShallowRef<number \\| undefined>>`	✗	not shown
`saveData`	`Readonly<ShallowRef<boolean \\| undefined>>`	✗	not shown
`type`	`Readonly<ShallowRef<NetworkType>>`	✗	not shown

Type Aliases¶

`NetworkType`¶

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

`NetworkEffectiveType`¶

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

`UseNetworkReturn`¶

type UseNetworkReturn = Readonly<NetworkState>;

Generated by Syntax Scribe

📄 useNetwork¶