Back to Hooks

useNetwork

packages/hooks/src/useNetwork/index.en-US.md

3.9.72.3 KB
Original Source

useNetwork

A hook that tracks the state of network connection.

Examples

Default usage

<code src="./demo/demo1.tsx" />

API

typescript
interface NetworkState {
  online?: boolean;
  since?: Date;
  rtt?: number;
  type?: string;
  downlink?: number;
  saveData?: boolean;
  downlinkMax?: number;
  effectiveType?: string;
}

const result: NetworkState = useNetwork();

Result

PropertyDescriptionType
onlineWhether connected to networkboolean
sinceonline latest update timeDate
rttThe effective round-trip time estimate in millisecondsnumber
typeThe connection type that the user agent is usingbluetooth | cellular | ethernet | none | wifi | wimax | other | unknown
downlinkThe effective bandwidth estimate in megabits per second,number
downlinkMaxAn upper bound on the downlink speed of the first network hopnumber
saveDataWhether the user agent has set the option to reduce data usageboolean
effectiveTypeThe effective connection typeslow-2g | 2g | 3g | 4g

More information refer to MDN NetworkInformation