{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-online",
  "title": "useOnline",
  "description": "An SSR-safe hook that tracks the browser's online/offline status via useSyncExternalStore.",
  "files": [
    {
      "path": "src/registry/hooks/use-online.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nexport interface UseOnlineOptions {\n  /** SSR 及 hydration 前使用的快照值。默认 `true`——多数访问发生在联网状态下,\n   *  假定在线比假定离线更少造成误报的\"离线横幅\"闪烁。 */\n  serverFallback?: boolean\n}\n\n/**\n * 订阅浏览器的网络在线状态,返回它当前是否在线。用 `useSyncExternalStore`\n * 把 `window` 的 `online`/`offline` 事件这个外部数据源接进 React 渲染树:\n * subscribe 挂两个事件监听、getSnapshot 读 `navigator.onLine`、\n * getServerSnapshot 在服务端渲染时返回 `serverFallback`。零 `useEffect` +\n * `setState`。\n *\n * **诚实边界**:`navigator.onLine` 只反映\"这台设备有没有连上一个网络接口\"\n * (Wi-Fi/以太网/蜂窝),**不保证\"能到达你的服务器\"**——连着 Wi-Fi 但那条\n * Wi-Fi 本身断了外网时,大多数浏览器仍会把 `navigator.onLine` 报告为\n * `true`。这是浏览器 API 本身的语义(它检测的是网络接口层,不是端到端可达\n * 性),不是这个 hook 的实现缺陷。如果需要\"服务是否真的可达\",要主动探测\n * (定时 `fetch` 一个健康检查端点),这个 hook 不做这件事——它只回答\"设备\n * 有没有网络接口\"。\n */\nexport function useOnline(options: UseOnlineOptions = {}): boolean {\n  const { serverFallback = true } = options\n\n  const subscribe = React.useCallback((callback: () => void) => {\n    if (typeof window === \"undefined\") return () => {}\n    window.addEventListener(\"online\", callback)\n    window.addEventListener(\"offline\", callback)\n    return () => {\n      window.removeEventListener(\"online\", callback)\n      window.removeEventListener(\"offline\", callback)\n    }\n  }, [])\n\n  const getSnapshot = React.useCallback(() => navigator.onLine, [])\n  const getServerSnapshot = React.useCallback(() => serverFallback, [serverFallback])\n\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n\nexport default useOnline\n",
      "type": "registry:hook"
    }
  ],
  "type": "registry:hook"
}