use-network

Get current connection status
Import

Usage

use-network hook returns an object with current connection status:

PropertyValue
Online
Online
rtt
downlink
effectiveType
saveData
false
import { Text, Table } from '@mantine/core';
import { useNetwork } from '@mantine/hooks';
function Demo() {
const networkStatus = useNetwork();
return (
<Table maw={300} sx={{ tableLayout: 'fixed' }} mx="auto">
<thead>
<tr>
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Online</td>
<td>
<Text size="sm" color={networkStatus.online ? 'teal' : 'red'}>
{networkStatus.online ? 'Online' : 'Offline'}
</Text>
</td>
</tr>
<tr>
<td>rtt</td>
<td>{networkStatus.rtt}</td>
</tr>
<tr>
<td>downlink</td>
<td>{networkStatus.downlink}</td>
</tr>
<tr>
<td>effectiveType</td>
<td>{networkStatus.effectiveType}</td>
</tr>
<tr>
<td>saveData</td>
<td>
<Text size="sm" color={networkStatus.saveData ? 'teal' : 'red'}>
{networkStatus.saveData ? 'true' : 'false'}
</Text>
</td>
</tr>
</tbody>
</Table>
);
}

Browser support

use-network uses experimental navigator.connection, see browser compatibility table.

Definition

function useNetwork(): {
online: boolean;
downlink?: number;
downlinkMax?: number;
effectiveType?: 'slow-2g' | '2g' | '3g' | '4g';
rtt?: number;
saveData?: boolean;
type?: 'bluetooth' | 'cellular' | 'ethernet' | 'wifi' | 'wimax' | 'none' | 'other' | 'unknown';
};