[URH-58] useOnlineStatus 신규

[suhyeoonn]

👾 Pull Request

• 티켓: useOnlineStatus 신규

• 상태: 신규

1️⃣ Spec

• 브라우저의 온라인/오프라인 상태를 판별하는 훅입니다.
• 온라인 상태가 변경될 때 실행할 콜백 함수를 선택적으로 지정할 수 있습니다.

2️⃣ 변경 사항

• 없음

3️⃣ 예시 코드

1. 콜백이 필요 없는 경우

import useOnlineStatus from './hooks/useOnlineStatus';

function App() {
  const { isOnline } = useOnlineStatus();

  return (
    <div>
      <h1>{isOnline ? 'online' : 'offline'}</h1>
    </div>
  );
}

2. 콜백이 필요한 경우

function App() {
  const { isOnline } = useOnlineStatus({ onlineCallback, offlineCallback });

  function onlineCallback() {
    console.log('online');
  }

  function offlineCallback() {
    console.log('offline');
  }

  return (
    <div>
      <h1>{isOnline ? 'online' : 'offline'}</h1>
    </div>
  );
}

4️⃣ 관련 문서 (선택 사항)

• https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine

[Choozii]

@suhyeoonn
수현님, 리액트 공식 문서 읽다가 수현님도 알면 좋을것 같은 부분을 발견해서 공유드립니다!
useSyncExternalStore라는 훅에 navigator.onLine 구독하는 코드가 예시로 있길래 공유드려욥!!!

https://ko.react.dev/reference/react/useSyncExternalStore#subscribing-to-a-browser-api

[jeongbaebang]

👍