0
# React Hooks
1
2
React hooks for integrating network state into components with automatic re-rendering on network changes. Includes both global singleton and isolated instance patterns.
3
4
## Capabilities
5
6
### useNetInfo Hook
7
8
A React Hook into the library's global singleton which updates when the connection state changes.
9
10
```typescript { .api }
11
/**
12
* A React Hook into this library's singleton which updates when the connection state changes.
13
* @param configuration - Configure the isolated network checker managed by this hook
14
* @returns The connection state
15
*/
16
function useNetInfo(
17
configuration?: Partial<NetInfoConfiguration>
18
): NetInfoState;
19
```
20
21
**Usage Examples:**
22
23
```typescript
24
import React from 'react';
25
import { useNetInfo } from "@react-native-community/netinfo";
26
27
function NetworkStatus() {
28
const netInfo = useNetInfo();
29
30
return (
31
<div>
32
<p>Type: {netInfo.type}</p>
33
<p>Is Connected: {netInfo.isConnected ? 'Yes' : 'No'}</p>
34
<p>Is Internet Reachable: {netInfo.isInternetReachable ? 'Yes' : 'No'}</p>
35
36
{netInfo.type === 'wifi' && netInfo.details && (
37
<div>
38
<p>SSID: {netInfo.details.ssid}</p>
39
<p>Signal Strength: {netInfo.details.strength}</p>
40
</div>
41
)}
42
</div>
43
);
44
}
45
46
// With custom configuration
47
function NetworkStatusWithConfig() {
48
const netInfo = useNetInfo({
49
reachabilityUrl: 'https://www.google.com/generate_204',
50
reachabilityTest: async (response) => response.status === 204,
51
});
52
53
return <div>Connected: {netInfo.isConnected ? 'Yes' : 'No'}</div>;
54
}
55
```
56
57
### useNetInfoInstance Hook
58
59
A React Hook which manages an isolated instance of the network info manager. This is not a hook into a singleton shared state.
60
61
```typescript { .api }
62
/**
63
* A React Hook which manages an isolated instance of the network info manager.
64
* This is not a hook into a singleton shared state. NetInfo.configure, NetInfo.addEventListener,
65
* NetInfo.fetch, NetInfo.refresh are performed on a global singleton and have no affect on this hook.
66
* @param isPaused - Pause the internal network checks
67
* @param configuration - Configure the isolated network checker managed by this hook
68
* @returns the netInfo state and a refresh function
69
*/
70
function useNetInfoInstance(
71
isPaused?: boolean,
72
configuration?: Partial<NetInfoConfiguration>
73
): {
74
netInfo: NetInfoState;
75
refresh: () => void;
76
};
77
```
78
79
**Usage Examples:**
80
81
```typescript
82
import React, { useState } from 'react';
83
import { useNetInfoInstance } from "@react-native-community/netinfo";
84
85
function IsolatedNetworkMonitor() {
86
const [isPaused, setIsPaused] = useState(false);
87
88
const { netInfo, refresh } = useNetInfoInstance(isPaused, {
89
reachabilityUrl: 'https://example.com/ping',
90
reachabilityShortTimeout: 3000,
91
});
92
93
return (
94
<div>
95
<h3>Isolated Network Monitor</h3>
96
<p>Type: {netInfo.type}</p>
97
<p>Connected: {netInfo.isConnected ? 'Yes' : 'No'}</p>
98
99
<button onClick={() => setIsPaused(!isPaused)}>
100
{isPaused ? 'Resume' : 'Pause'} Monitoring
101
</button>
102
103
<button onClick={refresh}>
104
Refresh Now
105
</button>
106
107
{netInfo.type === 'cellular' && netInfo.details && (
108
<div>
109
<p>Generation: {netInfo.details.cellularGeneration}</p>
110
<p>Carrier: {netInfo.details.carrier}</p>
111
</div>
112
)}
113
</div>
114
);
115
}
116
117
// Multiple isolated instances
118
function MultipleMonitors() {
119
const monitor1 = useNetInfoInstance(false, {
120
reachabilityUrl: 'https://google.com/generate_204',
121
});
122
123
const monitor2 = useNetInfoInstance(false, {
124
reachabilityUrl: 'https://cloudflare.com',
125
reachabilityTest: async (response) => response.status === 200,
126
});
127
128
return (
129
<div>
130
<div>
131
<h4>Monitor 1 (Google)</h4>
132
<p>Connected: {monitor1.netInfo.isConnected ? 'Yes' : 'No'}</p>
133
<button onClick={monitor1.refresh}>Refresh</button>
134
</div>
135
136
<div>
137
<h4>Monitor 2 (Cloudflare)</h4>
138
<p>Connected: {monitor2.netInfo.isConnected ? 'Yes' : 'No'}</p>
139
<button onClick={monitor2.refresh}>Refresh</button>
140
</div>
141
</div>
142
);
143
}
144
```
145
146
## Hook State Management
147
148
Both hooks return the same `NetInfoState` object but manage it differently:
149
150
- **`useNetInfo`**: Connects to the global singleton state managed by the main library functions
151
- **`useNetInfoInstance`**: Creates and manages its own isolated network state instance
152
153
### Global vs Isolated Instances
154
155
```typescript
156
import { useNetInfo, useNetInfoInstance, configure } from "@react-native-community/netinfo";
157
158
function NetworkComparison() {
159
// This hook will be affected by configure() calls
160
const globalState = useNetInfo();
161
162
// This hook maintains its own state, unaffected by global configure()
163
const { netInfo: isolatedState } = useNetInfoInstance();
164
165
return (
166
<div>
167
<h3>Global State</h3>
168
<p>Type: {globalState.type}</p>
169
170
<h3>Isolated State</h3>
171
<p>Type: {isolatedState.type}</p>
172
173
<button onClick={() => configure({ reachabilityUrl: 'https://example.com' })}>
174
Configure Global (only affects global state)
175
</button>
176
</div>
177
);
178
}
179
```
180
181
## Hook Configuration
182
183
```typescript { .api }
184
interface NetInfoConfiguration {
185
reachabilityUrl: string;
186
reachabilityMethod?: NetInfoMethodType;
187
reachabilityHeaders?: Record<string, string>;
188
reachabilityTest: (response: Response) => Promise<boolean>;
189
reachabilityLongTimeout: number;
190
reachabilityShortTimeout: number;
191
reachabilityRequestTimeout: number;
192
reachabilityShouldRun: () => boolean;
193
shouldFetchWiFiSSID: boolean;
194
useNativeReachability: boolean;
195
}
196
197
type NetInfoMethodType = 'HEAD' | 'GET';
198
```