0
# Network & Data
1

2
HTTP requests and network status monitoring with loading states, error handling, and connection information.
3

4
## Capabilities
5

6
### useFetch
7

8
HTTP requests with loading states, error handling, and request control.
9

10
```typescript { .api }
11
/**
12
 * HTTP requests with loading states and error handling
13
 * @param url - URL to fetch
14
 * @param options - Fetch options with additional configuration
15
 * @returns Object with data, loading state, error, and control functions
16
 */
17
function useFetch<T>(url: string, options?: UseFetchOptions): UseFetchReturnValue<T>;
18

19
interface UseFetchOptions extends RequestInit {
20
  autoInvoke?: boolean; // Start request immediately (default: true)
21
}
22

23
interface UseFetchReturnValue<T> {
24
  data: T | null;
25
  loading: boolean;
26
  error: Error | null;
27
  refetch: () => Promise<any>;
28
  abort: () => void;
29
}
30
```
31

32
**Usage Examples:**
33

34
```typescript
35
import { useFetch } from "@mantine/hooks";
36

37
function UserProfile({ userId }: { userId: string }) {
38
  const { data: user, loading, error, refetch } = useFetch<User>(
39
    `/api/users/${userId}`,
40
    {
41
      autoInvoke: true,
42
    }
43
  );
44
  
45
  if (loading) return <div>Loading...</div>;
46
  if (error) return <div>Error: {error.message}</div>;
47
  if (!user) return <div>No user found</div>;
48
  
49
  return (
50
    <div>
51
      <h1>{user.name}</h1>
52
      <button onClick={() => refetch()}>Refresh</button>
53
    </div>
54
  );
55
}
56

57
// Manual fetch control
58
function DataManager() {
59
  const { data, loading, error, refetch, abort } = useFetch<ApiResponse>(
60
    '/api/data',
61
    { autoInvoke: false }
62
  );
63
  
64
  return (
65
    <div>
66
      <button onClick={() => refetch()} disabled={loading}>
67
        {loading ? 'Loading...' : 'Fetch Data'}
68
      </button>
69
      <button onClick={() => abort()}>Cancel</button>
70
      {error && <div>Error: {error.message}</div>}
71
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
72
    </div>
73
  );
74
}
75
```
76

77
### useNetwork
78

79
Network connection information and status monitoring.
80

81
```typescript { .api }
82
/**
83
 * Network connection information
84
 * @returns Object with connection status and network information
85
 */
86
function useNetwork(): UserNetworkReturnValue;
87

88
interface UserNetworkReturnValue {
89
  online: boolean;
90
  downlink?: number;
91
  downlinkMax?: number;
92
  effectiveType?: string;
93
  rtt?: number;
94
  saveData?: boolean;
95
  type?: string;
96
}
97
```
98

99
**Usage Examples:**
100

101
```typescript
102
import { useNetwork } from "@mantine/hooks";
103

104
function NetworkStatus() {
105
  const network = useNetwork();
106
  
107
  return (
108
    <div>
109
      <div>Status: {network.online ? 'Online' : 'Offline'}</div>
110
      {network.online && (
111
        <>
112
          <div>Connection: {network.effectiveType}</div>
113
          <div>Downlink: {network.downlink} Mbps</div>
114
          <div>RTT: {network.rtt}ms</div>
115
          {network.saveData && <div>Save Data mode enabled</div>}
116
        </>
117
      )}
118
    </div>
119
  );
120
}
121

122
// Conditional data loading based on connection
123
function SmartImageLoader({ src, lowQualitySrc }: Props) {
124
  const network = useNetwork();
125
  
126
  const shouldUseLowQuality = 
127
    !network.online || 
128
    network.saveData || 
129
    network.effectiveType === 'slow-2g' ||
130
    network.effectiveType === '2g';
131
  
132
  return (
133
    <img 
134
      src={shouldUseLowQuality ? lowQualitySrc : src}
135
      alt="Smart loaded image"
136
    />
137
  );
138
}
139
```