Use Network - Mantine

import { UseNetworkDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.useNetwork);

Usage

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

Browser support

use-network uses the experimental navigator.connection API. See the browser compatibility table.

Definition

tsx


interface UserNetworkReturnValue {
  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';
}

function useNetwork(): UserNetworkReturnValue;

Exported types

The UserNetworkReturnValue type is exported from the @mantine/hooks package; you can import it in your application:

tsx

import type { UserNetworkReturnValue } from '@mantine/hooks';