@auraqule/react-network-status 0.2.0

package/README.md

@@ -0,0 +1,79 @@
+# react-network-status
+
+> A React hook to monitor network connectivity, online/offline state, and connection type. SSR-safe, zero dependencies beyond React.
+
+[![npm version](https://img.shields.io/npm/v/react-network-status)](https://www.npmjs.com/package/react-network-status)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/react-network-status)](https://bundlephobia.com/package/react-network-status)
+[![license](https://img.shields.io/npm/l/react-network-status)](./LICENSE)
+
+## Install
+
+```bash
+npm install react-network-status
+# or
+pnpm add react-network-status
+```
+
+## Usage
+
+```tsx
+import { useNetworkStatus } from "react-network-status";
+
+function App() {
+  const {
+    isOnline,
+    isOffline,
+    connectionType,
+    effectiveType,
+    downlink,
+    rtt,
+    saveData,
+    refresh,
+  } = useNetworkStatus();
+
+  return (
+    <div>
+      <p>Status: {isOnline ? "Online 🟢" : "Offline 🔴"}</p>
+      <p>Connection: {connectionType}</p>
+      <p>Effective type: {effectiveType}</p>
+      {downlink && <p>Downlink: {downlink} Mbps</p>}
+      {rtt && <p>RTT: {rtt} ms</p>}
+      {saveData && <p>Data saver: enabled</p>}
+      <button onClick={refresh}>Refresh</button>
+    </div>
+  );
+}
+```
+
+## API
+
+### `useNetworkStatus()`
+
+No options — just call it.
+
+### Returns
+
+| Value | Type | Description |
+|---|---|---|
+| `isOnline` | `boolean` | Whether the browser has network access |
+| `isOffline` | `boolean` | Inverse of `isOnline` |
+| `connectionType` | `ConnectionType` | wifi, ethernet, cellular, 2g, 3g, 4g, 5g, unknown |
+| `effectiveType` | `EffectiveConnectionType` | slow-2g, 2g, 3g, 4g, unknown |
+| `downlink` | `number \| undefined` | Estimated bandwidth in Mbps |
+| `rtt` | `number \| undefined` | Estimated round-trip time in ms |
+| `saveData` | `boolean \| undefined` | Whether data saver is enabled |
+| `refresh` | `() => void` | Manually re-read network status |
+
+> `connectionType`, `effectiveType`, `downlink`, `rtt`, and `saveData` rely on the [Network Information API](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API), which is not supported in all browsers. They will return `undefined` or `"unknown"` when unavailable.
+
+## Use Cases
+
+- Show offline banners or toasts
+- Disable uploads/fetches when offline
+- Adapt image quality based on connection speed
+- Warn users on slow connections before heavy operations
+- Respect data saver preferences
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,39 @@
+type ConnectionType = "wifi" | "ethernet" | "cellular" | "2g" | "3g" | "4g" | "5g" | "slow-2g" | "unknown" | "none";
+type EffectiveConnectionType = "slow-2g" | "2g" | "3g" | "4g" | "unknown";
+interface NetworkStatus {
+    /** Whether the browser has network access */
+    isOnline: boolean;
+    /** Whether the browser is offline */
+    isOffline: boolean;
+    /** The type of connection (wifi, cellular, etc.) — may be undefined if unsupported */
+    connectionType: ConnectionType;
+    /** Effective connection type based on observed latency — may be undefined if unsupported */
+    effectiveType: EffectiveConnectionType;
+    /** Estimated downlink bandwidth in Mbps — undefined if unsupported */
+    downlink: number | undefined;
+    /** Estimated round-trip time in ms — undefined if unsupported */
+    rtt: number | undefined;
+    /** Whether the user has enabled data saver mode — undefined if unsupported */
+    saveData: boolean | undefined;
+    /** Manually re-check network status */
+    refresh: () => void;
+}
+interface NetworkInformation extends EventTarget {
+    type?: string;
+    effectiveType?: string;
+    downlink?: number;
+    rtt?: number;
+    saveData?: boolean;
+    addEventListener(type: "change", listener: () => void): void;
+    removeEventListener(type: "change", listener: () => void): void;
+}
+declare global {
+    interface Navigator {
+        connection?: NetworkInformation;
+        mozConnection?: NetworkInformation;
+        webkitConnection?: NetworkInformation;
+    }
+}
+declare function useNetworkStatus(): NetworkStatus;
+
+export { type ConnectionType, type EffectiveConnectionType, type NetworkStatus, useNetworkStatus };

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+type ConnectionType = "wifi" | "ethernet" | "cellular" | "2g" | "3g" | "4g" | "5g" | "slow-2g" | "unknown" | "none";
+type EffectiveConnectionType = "slow-2g" | "2g" | "3g" | "4g" | "unknown";
+interface NetworkStatus {
+    /** Whether the browser has network access */
+    isOnline: boolean;
+    /** Whether the browser is offline */
+    isOffline: boolean;
+    /** The type of connection (wifi, cellular, etc.) — may be undefined if unsupported */
+    connectionType: ConnectionType;
+    /** Effective connection type based on observed latency — may be undefined if unsupported */
+    effectiveType: EffectiveConnectionType;
+    /** Estimated downlink bandwidth in Mbps — undefined if unsupported */
+    downlink: number | undefined;
+    /** Estimated round-trip time in ms — undefined if unsupported */
+    rtt: number | undefined;
+    /** Whether the user has enabled data saver mode — undefined if unsupported */
+    saveData: boolean | undefined;
+    /** Manually re-check network status */
+    refresh: () => void;
+}
+interface NetworkInformation extends EventTarget {
+    type?: string;
+    effectiveType?: string;
+    downlink?: number;
+    rtt?: number;
+    saveData?: boolean;
+    addEventListener(type: "change", listener: () => void): void;
+    removeEventListener(type: "change", listener: () => void): void;
+}
+declare global {
+    interface Navigator {
+        connection?: NetworkInformation;
+        mozConnection?: NetworkInformation;
+        webkitConnection?: NetworkInformation;
+    }
+}
+declare function useNetworkStatus(): NetworkStatus;
+
+export { type ConnectionType, type EffectiveConnectionType, type NetworkStatus, useNetworkStatus };

package/dist/index.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var react = require('react');
+
+// src/useNetworkStatus.ts
+function getConnection() {
+  var _a, _b;
+  if (typeof navigator === "undefined") return void 0;
+  return (_b = (_a = navigator.connection) != null ? _a : navigator.mozConnection) != null ? _b : navigator.webkitConnection;
+}
+function getConnectionType(connection) {
+  var _a;
+  if (!(connection == null ? void 0 : connection.type)) return "unknown";
+  return (_a = connection.type) != null ? _a : "unknown";
+}
+function getEffectiveType(connection) {
+  var _a;
+  if (!(connection == null ? void 0 : connection.effectiveType)) return "unknown";
+  return (_a = connection.effectiveType) != null ? _a : "unknown";
+}
+function getSnapshot() {
+  const isOnline = typeof navigator !== "undefined" ? navigator.onLine : true;
+  const connection = getConnection();
+  return {
+    isOnline,
+    isOffline: !isOnline,
+    connectionType: getConnectionType(connection),
+    effectiveType: getEffectiveType(connection),
+    downlink: connection == null ? void 0 : connection.downlink,
+    rtt: connection == null ? void 0 : connection.rtt,
+    saveData: connection == null ? void 0 : connection.saveData
+  };
+}
+function useNetworkStatus() {
+  const [status, setStatus] = react.useState(getSnapshot);
+  const update = react.useCallback(() => {
+    setStatus(getSnapshot());
+  }, []);
+  react.useEffect(() => {
+    window.addEventListener("online", update);
+    window.addEventListener("offline", update);
+    const connection = getConnection();
+    connection == null ? void 0 : connection.addEventListener("change", update);
+    return () => {
+      window.removeEventListener("online", update);
+      window.removeEventListener("offline", update);
+      connection == null ? void 0 : connection.removeEventListener("change", update);
+    };
+  }, [update]);
+  return { ...status, refresh: update };
+}
+
+exports.useNetworkStatus = useNetworkStatus;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useNetworkStatus.ts"],"names":["useState","useCallback","useEffect"],"mappings":";;;;;AAsDA,SAAS,aAAA,GAAgD;AAtDzD,EAAA,IAAA,EAAA,EAAA,EAAA;AAuDE,EAAA,IAAI,OAAO,SAAA,KAAc,WAAA,EAAa,OAAO,MAAA;AAC7C,EAAA,OAAA,CACE,qBAAU,UAAA,KAAV,IAAA,GAAA,EAAA,GACA,SAAA,CAAU,aAAA,KADV,YAEA,SAAA,CAAU,gBAAA;AAEd;AAEA,SAAS,kBAAkB,UAAA,EAAiD;AA/D5E,EAAA,IAAA,EAAA;AAgEE,EAAA,IAAI,EAAC,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,IAAA,CAAA,EAAM,OAAO,SAAA;AAC9B,EAAA,OAAA,CAAQ,EAAA,GAAA,UAAA,CAAW,SAAX,IAAA,GAAA,EAAA,GAAsC,SAAA;AAChD;AAEA,SAAS,iBAAiB,UAAA,EAA0D;AApEpF,EAAA,IAAA,EAAA;AAqEE,EAAA,IAAI,EAAC,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,aAAA,CAAA,EAAe,OAAO,SAAA;AACvC,EAAA,OAAA,CAAQ,EAAA,GAAA,UAAA,CAAW,kBAAX,IAAA,GAAA,EAAA,GAAwD,SAAA;AAClE;AAEA,SAAS,WAAA,GAA8C;AACrD,EAAA,MAAM,QAAA,GAAW,OAAO,SAAA,KAAc,WAAA,GAAc,UAAU,MAAA,GAAS,IAAA;AACvE,EAAA,MAAM,aAAa,aAAA,EAAc;AAEjC,EAAA,OAAO;AAAA,IACL,QAAA;AAAA,IACA,WAAW,CAAC,QAAA;AAAA,IACZ,cAAA,EAAgB,kBAAkB,UAAU,CAAA;AAAA,IAC5C,aAAA,EAAe,iBAAiB,UAAU,CAAA;AAAA,IAC1C,UAAU,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,QAAA;AAAA,IACtB,KAAK,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,GAAA;AAAA,IACjB,UAAU,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY;AAAA,GACxB;AACF;AAEO,SAAS,gBAAA,GAAkC;AAChD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAyC,WAAW,CAAA;AAEhF,EAAA,MAAM,MAAA,GAASC,kBAAY,MAAM;AAC/B,IAAA,SAAA,CAAU,aAAa,CAAA;AAAA,EACzB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,MAAM,CAAA;AACxC,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,MAAM,CAAA;AAEzC,IAAA,MAAM,aAAa,aAAA,EAAc;AACjC,IAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,iBAAiB,QAAA,EAAU,MAAA,CAAA;AAEvC,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,UAAU,MAAM,CAAA;AAC3C,MAAA,MAAA,CAAO,mBAAA,CAAoB,WAAW,MAAM,CAAA;AAC5C,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,oBAAoB,QAAA,EAAU,MAAA,CAAA;AAAA,IAC5C,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,OAAO,EAAE,GAAG,MAAA,EAAQ,OAAA,EAAS,MAAA,EAAO;AACtC","file":"index.js","sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\n\nexport type ConnectionType =\n  | \"wifi\"\n  | \"ethernet\"\n  | \"cellular\"\n  | \"2g\"\n  | \"3g\"\n  | \"4g\"\n  | \"5g\"\n  | \"slow-2g\"\n  | \"unknown\"\n  | \"none\";\n\nexport type EffectiveConnectionType = \"slow-2g\" | \"2g\" | \"3g\" | \"4g\" | \"unknown\";\n\nexport interface NetworkStatus {\n  /** Whether the browser has network access */\n  isOnline: boolean;\n  /** Whether the browser is offline */\n  isOffline: boolean;\n  /** The type of connection (wifi, cellular, etc.) — may be undefined if unsupported */\n  connectionType: ConnectionType;\n  /** Effective connection type based on observed latency — may be undefined if unsupported */\n  effectiveType: EffectiveConnectionType;\n  /** Estimated downlink bandwidth in Mbps — undefined if unsupported */\n  downlink: number | undefined;\n  /** Estimated round-trip time in ms — undefined if unsupported */\n  rtt: number | undefined;\n  /** Whether the user has enabled data saver mode — undefined if unsupported */\n  saveData: boolean | undefined;\n  /** Manually re-check network status */\n  refresh: () => void;\n}\n\n// Network Information API types (not yet in all TS lib versions)\ninterface NetworkInformation extends EventTarget {\n  type?: string;\n  effectiveType?: string;\n  downlink?: number;\n  rtt?: number;\n  saveData?: boolean;\n  addEventListener(type: \"change\", listener: () => void): void;\n  removeEventListener(type: \"change\", listener: () => void): void;\n}\n\ndeclare global {\n  interface Navigator {\n    connection?: NetworkInformation;\n    mozConnection?: NetworkInformation;\n    webkitConnection?: NetworkInformation;\n  }\n}\n\nfunction getConnection(): NetworkInformation | undefined {\n  if (typeof navigator === \"undefined\") return undefined;\n  return (\n    navigator.connection ??\n    navigator.mozConnection ??\n    navigator.webkitConnection\n  );\n}\n\nfunction getConnectionType(connection?: NetworkInformation): ConnectionType {\n  if (!connection?.type) return \"unknown\";\n  return (connection.type as ConnectionType) ?? \"unknown\";\n}\n\nfunction getEffectiveType(connection?: NetworkInformation): EffectiveConnectionType {\n  if (!connection?.effectiveType) return \"unknown\";\n  return (connection.effectiveType as EffectiveConnectionType) ?? \"unknown\";\n}\n\nfunction getSnapshot(): Omit<NetworkStatus, \"refresh\"> {\n  const isOnline = typeof navigator !== \"undefined\" ? navigator.onLine : true;\n  const connection = getConnection();\n\n  return {\n    isOnline,\n    isOffline: !isOnline,\n    connectionType: getConnectionType(connection),\n    effectiveType: getEffectiveType(connection),\n    downlink: connection?.downlink,\n    rtt: connection?.rtt,\n    saveData: connection?.saveData,\n  };\n}\n\nexport function useNetworkStatus(): NetworkStatus {\n  const [status, setStatus] = useState<Omit<NetworkStatus, \"refresh\">>(getSnapshot);\n\n  const update = useCallback(() => {\n    setStatus(getSnapshot());\n  }, []);\n\n  useEffect(() => {\n    window.addEventListener(\"online\", update);\n    window.addEventListener(\"offline\", update);\n\n    const connection = getConnection();\n    connection?.addEventListener(\"change\", update);\n\n    return () => {\n      window.removeEventListener(\"online\", update);\n      window.removeEventListener(\"offline\", update);\n      connection?.removeEventListener(\"change\", update);\n    };\n  }, [update]);\n\n  return { ...status, refresh: update };\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,53 @@
+import { useState, useCallback, useEffect } from 'react';
+
+// src/useNetworkStatus.ts
+function getConnection() {
+  var _a, _b;
+  if (typeof navigator === "undefined") return void 0;
+  return (_b = (_a = navigator.connection) != null ? _a : navigator.mozConnection) != null ? _b : navigator.webkitConnection;
+}
+function getConnectionType(connection) {
+  var _a;
+  if (!(connection == null ? void 0 : connection.type)) return "unknown";
+  return (_a = connection.type) != null ? _a : "unknown";
+}
+function getEffectiveType(connection) {
+  var _a;
+  if (!(connection == null ? void 0 : connection.effectiveType)) return "unknown";
+  return (_a = connection.effectiveType) != null ? _a : "unknown";
+}
+function getSnapshot() {
+  const isOnline = typeof navigator !== "undefined" ? navigator.onLine : true;
+  const connection = getConnection();
+  return {
+    isOnline,
+    isOffline: !isOnline,
+    connectionType: getConnectionType(connection),
+    effectiveType: getEffectiveType(connection),
+    downlink: connection == null ? void 0 : connection.downlink,
+    rtt: connection == null ? void 0 : connection.rtt,
+    saveData: connection == null ? void 0 : connection.saveData
+  };
+}
+function useNetworkStatus() {
+  const [status, setStatus] = useState(getSnapshot);
+  const update = useCallback(() => {
+    setStatus(getSnapshot());
+  }, []);
+  useEffect(() => {
+    window.addEventListener("online", update);
+    window.addEventListener("offline", update);
+    const connection = getConnection();
+    connection == null ? void 0 : connection.addEventListener("change", update);
+    return () => {
+      window.removeEventListener("online", update);
+      window.removeEventListener("offline", update);
+      connection == null ? void 0 : connection.removeEventListener("change", update);
+    };
+  }, [update]);
+  return { ...status, refresh: update };
+}
+
+export { useNetworkStatus };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useNetworkStatus.ts"],"names":[],"mappings":";;;AAsDA,SAAS,aAAA,GAAgD;AAtDzD,EAAA,IAAA,EAAA,EAAA,EAAA;AAuDE,EAAA,IAAI,OAAO,SAAA,KAAc,WAAA,EAAa,OAAO,MAAA;AAC7C,EAAA,OAAA,CACE,qBAAU,UAAA,KAAV,IAAA,GAAA,EAAA,GACA,SAAA,CAAU,aAAA,KADV,YAEA,SAAA,CAAU,gBAAA;AAEd;AAEA,SAAS,kBAAkB,UAAA,EAAiD;AA/D5E,EAAA,IAAA,EAAA;AAgEE,EAAA,IAAI,EAAC,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,IAAA,CAAA,EAAM,OAAO,SAAA;AAC9B,EAAA,OAAA,CAAQ,EAAA,GAAA,UAAA,CAAW,SAAX,IAAA,GAAA,EAAA,GAAsC,SAAA;AAChD;AAEA,SAAS,iBAAiB,UAAA,EAA0D;AApEpF,EAAA,IAAA,EAAA;AAqEE,EAAA,IAAI,EAAC,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,aAAA,CAAA,EAAe,OAAO,SAAA;AACvC,EAAA,OAAA,CAAQ,EAAA,GAAA,UAAA,CAAW,kBAAX,IAAA,GAAA,EAAA,GAAwD,SAAA;AAClE;AAEA,SAAS,WAAA,GAA8C;AACrD,EAAA,MAAM,QAAA,GAAW,OAAO,SAAA,KAAc,WAAA,GAAc,UAAU,MAAA,GAAS,IAAA;AACvE,EAAA,MAAM,aAAa,aAAA,EAAc;AAEjC,EAAA,OAAO;AAAA,IACL,QAAA;AAAA,IACA,WAAW,CAAC,QAAA;AAAA,IACZ,cAAA,EAAgB,kBAAkB,UAAU,CAAA;AAAA,IAC5C,aAAA,EAAe,iBAAiB,UAAU,CAAA;AAAA,IAC1C,UAAU,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,QAAA;AAAA,IACtB,KAAK,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,GAAA;AAAA,IACjB,UAAU,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY;AAAA,GACxB;AACF;AAEO,SAAS,gBAAA,GAAkC;AAChD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAyC,WAAW,CAAA;AAEhF,EAAA,MAAM,MAAA,GAAS,YAAY,MAAM;AAC/B,IAAA,SAAA,CAAU,aAAa,CAAA;AAAA,EACzB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,MAAM,CAAA;AACxC,IAAA,MAAA,CAAO,gBAAA,CAAiB,WAAW,MAAM,CAAA;AAEzC,IAAA,MAAM,aAAa,aAAA,EAAc;AACjC,IAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,iBAAiB,QAAA,EAAU,MAAA,CAAA;AAEvC,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,UAAU,MAAM,CAAA;AAC3C,MAAA,MAAA,CAAO,mBAAA,CAAoB,WAAW,MAAM,CAAA;AAC5C,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,oBAAoB,QAAA,EAAU,MAAA,CAAA;AAAA,IAC5C,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,OAAO,EAAE,GAAG,MAAA,EAAQ,OAAA,EAAS,MAAA,EAAO;AACtC","file":"index.mjs","sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\n\nexport type ConnectionType =\n  | \"wifi\"\n  | \"ethernet\"\n  | \"cellular\"\n  | \"2g\"\n  | \"3g\"\n  | \"4g\"\n  | \"5g\"\n  | \"slow-2g\"\n  | \"unknown\"\n  | \"none\";\n\nexport type EffectiveConnectionType = \"slow-2g\" | \"2g\" | \"3g\" | \"4g\" | \"unknown\";\n\nexport interface NetworkStatus {\n  /** Whether the browser has network access */\n  isOnline: boolean;\n  /** Whether the browser is offline */\n  isOffline: boolean;\n  /** The type of connection (wifi, cellular, etc.) — may be undefined if unsupported */\n  connectionType: ConnectionType;\n  /** Effective connection type based on observed latency — may be undefined if unsupported */\n  effectiveType: EffectiveConnectionType;\n  /** Estimated downlink bandwidth in Mbps — undefined if unsupported */\n  downlink: number | undefined;\n  /** Estimated round-trip time in ms — undefined if unsupported */\n  rtt: number | undefined;\n  /** Whether the user has enabled data saver mode — undefined if unsupported */\n  saveData: boolean | undefined;\n  /** Manually re-check network status */\n  refresh: () => void;\n}\n\n// Network Information API types (not yet in all TS lib versions)\ninterface NetworkInformation extends EventTarget {\n  type?: string;\n  effectiveType?: string;\n  downlink?: number;\n  rtt?: number;\n  saveData?: boolean;\n  addEventListener(type: \"change\", listener: () => void): void;\n  removeEventListener(type: \"change\", listener: () => void): void;\n}\n\ndeclare global {\n  interface Navigator {\n    connection?: NetworkInformation;\n    mozConnection?: NetworkInformation;\n    webkitConnection?: NetworkInformation;\n  }\n}\n\nfunction getConnection(): NetworkInformation | undefined {\n  if (typeof navigator === \"undefined\") return undefined;\n  return (\n    navigator.connection ??\n    navigator.mozConnection ??\n    navigator.webkitConnection\n  );\n}\n\nfunction getConnectionType(connection?: NetworkInformation): ConnectionType {\n  if (!connection?.type) return \"unknown\";\n  return (connection.type as ConnectionType) ?? \"unknown\";\n}\n\nfunction getEffectiveType(connection?: NetworkInformation): EffectiveConnectionType {\n  if (!connection?.effectiveType) return \"unknown\";\n  return (connection.effectiveType as EffectiveConnectionType) ?? \"unknown\";\n}\n\nfunction getSnapshot(): Omit<NetworkStatus, \"refresh\"> {\n  const isOnline = typeof navigator !== \"undefined\" ? navigator.onLine : true;\n  const connection = getConnection();\n\n  return {\n    isOnline,\n    isOffline: !isOnline,\n    connectionType: getConnectionType(connection),\n    effectiveType: getEffectiveType(connection),\n    downlink: connection?.downlink,\n    rtt: connection?.rtt,\n    saveData: connection?.saveData,\n  };\n}\n\nexport function useNetworkStatus(): NetworkStatus {\n  const [status, setStatus] = useState<Omit<NetworkStatus, \"refresh\">>(getSnapshot);\n\n  const update = useCallback(() => {\n    setStatus(getSnapshot());\n  }, []);\n\n  useEffect(() => {\n    window.addEventListener(\"online\", update);\n    window.addEventListener(\"offline\", update);\n\n    const connection = getConnection();\n    connection?.addEventListener(\"change\", update);\n\n    return () => {\n      window.removeEventListener(\"online\", update);\n      window.removeEventListener(\"offline\", update);\n      connection?.removeEventListener(\"change\", update);\n    };\n  }, [update]);\n\n  return { ...status, refresh: update };\n}\n"]}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@auraqule/react-network-status",
+  "version": "0.2.0",
+  "description": "A React hook to monitor network connectivity, online/offline state, and connection type",
+  "keywords": [
+    "react",
+    "hook",
+    "network",
+    "online",
+    "offline",
+    "connectivity",
+    "connection"
+  ],
+  "author": "Christian Peters <auraqule@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/auraqule/react-utils-monorepo.git",
+    "directory": "packages/react-idle-detect"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "18.3.1",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "lint": "tsc --noEmit"
+  }
+}