use-network

1import { useCallback, useRef, useSyncExternalStore } from 'react'
2 
3export interface NetworkState {
4  since?: Date
5  online?: boolean
6  rtt?: number
7  type?: string
8  downlink?: number
9  saveData?: boolean
10  downlinkMax?: number
11  effectiveType?: string
12}
13 
14function getConnection() {
15  const nav = navigator as any
16  if (typeof nav !== 'object') {
17    return null
18  }
19  return nav.connection || nav.mozConnection || nav.webkitConnection
20}
21 
22function getConnectionProperty(): NetworkState {
23  const c = getConnection()
24  if (!c) {
25    return {}
26  }
27  return {
28    rtt: c.rtt,
29    type: c.type,
30    saveData: c.saveData,
31    downlink: c.downlink,
32    downlinkMax: c.downlinkMax,
33    effectiveType: c.effectiveType,
34  }
35}
36 
37function serverSnapshot() {
38  return {
39    since: undefined,
40    online: true,
41    ...getConnectionProperty(),
42  }
43}
44 
45function getInitialOnlineState(): boolean {
46  if (typeof navigator !== 'object') {
47    return true
48  }
49  return navigator.onLine
50}
51 
52export function useNetwork() {
53  const networkState = useRef<NetworkState>({
54    since: undefined,
55    online: getInitialOnlineState(),
56    ...getConnectionProperty(),
57  })
58 
59  const subscribe = useCallback((onStoreChange: () => void) => {
60    const onOnline = () => {
61      networkState.current = {
62        ...networkState.current,
63        since: new Date(),
64        online: true,
65        ...getConnectionProperty(),
66      }
67      onStoreChange()
68    }
69 
70    const onOffline = () => {
71      networkState.current = {
72        ...networkState.current,
73        since: new Date(),
74        online: false,
75        ...getConnectionProperty(),
76      }
77      onStoreChange()
78    }
79 
80    const onConnectionChange = () => {
81      networkState.current = {
82        ...networkState.current,
83        since: new Date(),
84        ...getConnectionProperty(),
85      }
86      onStoreChange()
87    }
88 
89    window.addEventListener('online', onOnline)
90    window.addEventListener('offline', onOffline)
91 
92    const connection = getConnection()
93    connection?.addEventListener('change', onConnectionChange)
94 
95    return () => {
96      window.removeEventListener('online', onOnline)
97      window.removeEventListener('offline', onOffline)
98      connection?.removeEventListener('change', onConnectionChange)
99    }
100  }, [])
101 
102  const snapshot = useCallback(() => networkState.current, [])
103 
104  return useSyncExternalStore(subscribe, snapshot, serverSnapshot)
105}