useNetwork

useNetwork (네트워크 상태)

useNetwork 훅은 현재 연결 상태를 포함한 객체를 반환해요. 온라인 여부와 연결 속도 등의 정보를 제공해요.

출처: 문서

본문

useNetwork 훅은 현재 연결 상태를 가진 객체를 반환해요.

import { Text, Table } from '@mantine/core';
import { useNetwork } from '@mantine/hooks';

function Demo() {
  const networkStatus = useNetwork();

  return (
    <Table>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>Property</Table.Th>
          <Table.Th>Value</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>
        <Table.Tr>
          <Table.Td>Online</Table.Td>
          <Table.Td>{networkStatus.online ? 'Online' : 'Offline'}</Table.Td>
        </Table.Tr>
        <Table.Tr>
          <Table.Td>rtt</Table.Td>
          <Table.Td>{networkStatus.rtt}</Table.Td>
        </Table.Tr>
        <Table.Tr>
          <Table.Td>downlink</Table.Td>
          <Table.Td>{networkStatus.downlink}</Table.Td>
        </Table.Tr>
        <Table.Tr>
          <Table.Td>effectiveType</Table.Td>
          <Table.Td>{networkStatus.effectiveType}</Table.Td>
        </Table.Tr>
        <Table.Tr>
          <Table.Td>saveData</Table.Td>
          <Table.Td>{networkStatus.saveData ? 'true' : 'false'}</Table.Td>
        </Table.Tr>
      </Table.Tbody>
    </Table>
  );
}

브라우저 지원 (Browser support)

useNetwork는 실험적인 navigator.connection API를 사용해요. 브라우저 호환성 표를 확인하세요.

정의 (Definition)

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

UserNetworkReturnValue 타입은 @mantine/hooks 패키지에서 내보내져요.

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

더 알아보기 (Learn more)