shadcn-ahooks

useNetwork

A hook that tracks the state of network connection.

Overview

A hook that tracks the state of network connection.

Documentation and Examples

Installation

Open in
pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useNetwork.json
npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useNetwork.json
yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useNetwork.json
bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useNetwork.json

A hook that tracks the state of network connection.

Examples

Default usage

API

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

On this page