1---
2category: Sensors
3---
4 
5# useNetwork
6 
7Reactive [Network status](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API). 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.
8 
9## Usage
10 
11```ts
12import { useNetwork } from '@vueuse/core'
13 
14const { isOnline, offlineAt, downlink, downlinkMax, effectiveType, saveData, type } = useNetwork()
15 
16console.log(isOnline.value)
17```
18 
19To use as an object, wrap it with `reactive()`
20 
21```ts
22import { useNetwork } from '@vueuse/core'
23// ---cut---
24import { reactive } from 'vue'
25 
26const network = reactive(useNetwork())
27 
28console.log(network.isOnline)
29```
30 
31## Component Usage
32 
33```vue
34<template>
35  <UseNetwork v-slot="{ isOnline, type }">
36    Is Online: {{ isOnline }}
37    Type: {{ type }}
38  </UseNetwork>
39</template>
40```
41 
42## Type Declarations
43 
44```ts
45export interface UseNetworkOptions extends ConfigurableWindow {}
46export type NetworkType =
47  | "bluetooth"
48  | "cellular"
49  | "ethernet"
50  | "none"
51  | "wifi"
52  | "wimax"
53  | "other"
54  | "unknown"
55export type NetworkEffectiveType = "slow-2g" | "2g" | "3g" | "4g" | undefined
56export interface NetworkState extends Supportable {
57  /**
58   * If the user is currently connected.
59   */
60  isOnline: Readonly<ShallowRef<boolean>>
61  /**
62   * The time since the user was last connected.
63   */
64  offlineAt: Readonly<ShallowRef<number | undefined>>
65  /**
66   * At this time, if the user is offline and reconnects
67   */
68  onlineAt: Readonly<ShallowRef<number | undefined>>
69  /**
70   * The download speed in Mbps.
71   */
72  downlink: Readonly<ShallowRef<number | undefined>>
73  /**
74   * The max reachable download speed in Mbps.
75   */
76  downlinkMax: Readonly<ShallowRef<number | undefined>>
77  /**
78   * The detected effective speed type.
79   */
80  effectiveType: Readonly<ShallowRef<NetworkEffectiveType | undefined>>
81  /**
82   * The estimated effective round-trip time of the current connection.
83   */
84  rtt: Readonly<ShallowRef<number | undefined>>
85  /**
86   * If the user activated data saver mode.
87   */
88  saveData: Readonly<ShallowRef<boolean | undefined>>
89  /**
90   * The detected connection/network type.
91   */
92  type: Readonly<ShallowRef<NetworkType>>
93}
94export type UseNetworkReturn = Readonly<NetworkState>
95/**
96 * Reactive Network status.
97 *
98 * @see https://vueuse.org/useNetwork
99 * @param options
100 *
101 * @__NO_SIDE_EFFECTS__
102 */
103export declare function useNetwork(
104  options?: UseNetworkOptions,
105): UseNetworkReturn
106```
107