# NetworkInformation

The NetworkInformation (opens new window).

# State

The useNetworkInformation function exposes the following reactive state:

import { useNetworkInformation } from "vue-composable";

const {
  downlink,
  downlinkMax,
  effectiveType,
  rtt,
  saveData,
  supported,
  type
} = useNetworkInformation();
State Type Description
downlink Number Returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds.
downlinkMax Number Returns the maximum downlink speed, in megabits per second (Mbps), for the underlying connection technology.
effectiveType String Returns the effective type of the connection meaning one of slow-2g, 2g, 3g, or 4g. This value is determined using a combination of recently observed round-trip time and downlink values.
rtt Number Returns the estimated effective round-trip time of the current connection, rounded to the nearest multiple of 25 milliseconds.
saveData Boolean Returns true if the user has set a reduced data usage option on the user agent.
supported Boolean If the current browser supports Network Information API
type String Returns the type of connection a device is using to communicate with the network. It will be one of the following values: bluetooth, cellular, ethernet, none, wifi, wimax, other, unknown

# Methods

The useNetworkInformation function exposes the following methods:

import { useNetworkInformation } from "vue-composable";

const { remove } = useNetworkInformation();
Signature Description
remove Manually removes the event listener

# Example

Network information

supported: false

downlink: 0

downlinkMax: 0

effectiveType: none

round-trip time: 0

saveData: false

type: none

# Code

<template>
  <div>
    <h3>Network information</h3>

    <p>
      supported: <b>{{ supported }}</b>
    </p>
    <p>
      downlink: <b>{{ downlink }}</b>
    </p>
    <p>
      downlinkMax: <b>{{ downlinkMax }}</b>
    </p>
    <p>
      effectiveType: <b>{{ effectiveType }}</b>
    </p>
    <p>
      round-trip time: <b>{{ rtt }}</b>
    </p>
    <p>
      saveData: <b>{{ saveData }}</b>
    </p>
    <p>
      type: <b>{{ type }}</b>
    </p>
  </div>
</template>

<script>
import { useNetworkInformation } from "vue-composable";

export default {
  name: "NetworkInformationExample",
  setup() {
    return useNetworkInformation();
  }
};
</script>