useNetwork

useSyncExternalStore를 사용해 브라우저 네트워크 연결 상태를 구독하고, 온라인 상태 여부를 반환하는 커스텀 훅입니다.

onlineCallback, offlineCallback을 통해 네트워크 상태가 변경될 때 원하는 함수를 호출할 수 있습니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface UseNetworkProps {
  onlineCallback?: (event: Event) => void;
  offlineCallback?: (event: Event) => void;
}

const useNetwork: ({ onlineCallback, offlineCallback }?: UseNetworkProps) => {
  isOnline: boolean;
};

Options

Name	Type	Default	Description
onlineCallback	(event: Event) => void	-	네트워크가 온라인 상태로 변경될 때 호출되는 콜백 함수
offlineCallback	(event: Event) => void	-	네트워크가 오프라인 상태로 변경될 때 호출되는 콜백 함수

Returns

Name	Type	Description
isOnline	boolean	현재 네트워크가 온라인 상태인지 여부

Remarks

참고 자료

• useSyncExternalStore(en) - react.dev
• useSyncExternalStore(ko) - react.dev

Usage

typescript

import { useNetwork } from '@modern-kit/react';

const Example = () => {
  const { isOnline } = useNetwork({
    onlineCallback: () => {
      alert('online');
    },
    offlineCallback: () => {
      alert('offline');
    },
  });

  return (
    <div>
      <p>개발자 도구의 네트워크 탭에서 디바이스 연결을 끊어보세요.</p>
      <p>{isOnline ? '🟢 online' : '❌ offline'}</p>
    </div>
  );
};

Example

개발자 도구의 네트워크 탭에서 디바이스 연결을 끊어보세요.

❌ Offline