@modern-kit/react
Version:
1 lines • 3.83 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useNetwork/index.ts"],"sourcesContent":["import { noop } from '@modern-kit/utils';\nimport { usePreservedCallback } from '../usePreservedCallback';\nimport { useSyncExternalStore } from 'react';\n\ninterface UseNetworkProps {\n onlineAction?: (event: Event) => void;\n offlineAction?: (event: Event) => void;\n}\n\nconst getSnapshot = () => {\n return navigator.onLine;\n};\n\n/**\n * @see https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering\n */\nconst getServerSnapshot = () => {\n return true;\n};\n\nconst subscribe = (\n onStoreChange: () => void,\n onlineAction: (event: Event) => void,\n offlineAction: (event: Event) => void\n) => {\n const handleOnlineCallback = (event: Event) => {\n onlineAction(event);\n return onStoreChange();\n };\n\n const handleOfflineCallback = (event: Event) => {\n offlineAction(event);\n return onStoreChange();\n };\n\n window.addEventListener('online', handleOnlineCallback);\n window.addEventListener('offline', handleOfflineCallback);\n\n return () => {\n window.removeEventListener('online', handleOnlineCallback);\n window.removeEventListener('offline', handleOfflineCallback);\n };\n};\n\n/**\n * @description 네트워크 상태 변화를 감지하고, 현재 온라인 상태를 나타내는 `isOnline` 값을 반환합니다.\n * 또한, 네트워크 상태가 온라인 또는 오프라인으로 변경될 때 실행될 콜백 함수를 전달할 수 있습니다.\n *\n * @see https://react.dev/reference/react/useSyncExternalStore#subscribing-to-a-browser-api\n *\n * @param {UseNetworkProps} props - 네트워크 상태 변경 시 호출될 콜백 함수 설정을 위한 객체입니다.\n * @param {(event: Event) => void} [props.onlineAction] - 네트워크가 온라인 상태로 변경될 때 호출되는 콜백 함수입니다.\n * @param {(event: Event) => void} [props.offlineAction] - 네트워크가 오프라인 상태로 변경될 때 호출되는 콜백 함수입니다.\n *\n * @returns {boolean} 현재 네트워크가 온라인 상태인지 여부를 나타냅니다.\n *\n * @example\n * const isOnline = useNetwork({\n * onlineAction: () => console.log('온라인 상태입니다!'),\n * offlineAction: () => console.log('오프라인 상태입니다!')\n * });\n */\nexport function useNetwork({\n onlineAction = noop,\n offlineAction = noop,\n}: UseNetworkProps = {}): boolean {\n const preservedSubscribe = usePreservedCallback((onStoreChange: () => void) =>\n subscribe(onStoreChange, onlineAction, offlineAction)\n );\n\n const isOnline = useSyncExternalStore(\n preservedSubscribe,\n getSnapshot,\n getServerSnapshot\n );\n\n return isOnline;\n}\n"],"names":["noop","usePreservedCallback","useSyncExternalStore"],"mappings":";;;;;;AASA,MAAM,cAAc,MAAM;AACxB,EAAA,OAAO,SAAA,CAAU,MAAA;AACnB,CAAA;AAKA,MAAM,oBAAoB,MAAM;AAC9B,EAAA,OAAO,IAAA;AACT,CAAA;AAEA,MAAM,SAAA,GAAY,CAChB,aAAA,EACA,YAAA,EACA,aAAA,KACG;AACH,EAAA,MAAM,oBAAA,GAAuB,CAAC,KAAA,KAAiB;AAC7C,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAA,OAAO,aAAA,EAAc;AAAA,EACvB,CAAA;AAEA,EAAA,MAAM,qBAAA,GAAwB,CAAC,KAAA,KAAiB;AAC9C,IAAA,aAAA,CAAc,KAAK,CAAA;AACnB,IAAA,OAAO,aAAA,EAAc;AAAA,EACvB,CAAA;AAEA,EAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,oBAAoB,CAAA;AACtD,EAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,qBAAqB,CAAA;AAExD,EAAA,OAAO,MAAM;AACX,IAAA,MAAA,CAAO,mBAAA,CAAoB,UAAU,oBAAoB,CAAA;AACzD,IAAA,MAAA,CAAO,mBAAA,CAAoB,WAAW,qBAAqB,CAAA;AAAA,EAC7D,CAAA;AACF,CAAA;AAoBO,SAAS,UAAA,CAAW;AAAA,EACzB,YAAA,GAAeA,UAAA;AAAA,EACf,aAAA,GAAgBA;AAClB,CAAA,GAAqB,EAAC,EAAY;AAChC,EAAA,MAAM,kBAAA,GAAqBC,8CAAA;AAAA,IAAqB,CAAC,aAAA,KAC/C,SAAA,CAAU,aAAA,EAAe,cAAc,aAAa;AAAA,GACtD;AAEA,EAAA,MAAM,QAAA,GAAWC,0BAAA;AAAA,IACf,kBAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,OAAO,QAAA;AACT;;;;"}