feat: Added use-network.

README.md

@@ -91,7 +91,7 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
 - [ ] use-mouse
 - [ ] use-move
 - [ ] use-mutation-observer
-- [ ] use-network
+- [x] use-network
 - [ ] use-orientation
 - [x] use-os
 - [ ] use-page-leave

dev/App.tsx

@@ -2,7 +2,7 @@ import type { Component } from 'solid-js';
 import './app.css';
 
 // Hooks
-import { useClickOutside, useHotkeys, useHover, useIdle, useOs } from '../src';
+import { useClickOutside, useHotkeys, useHover, useIdle, useNetwork, useOs } from '../src';
 
 const App: Component = () => {
   // let ref = useClickOutside(() => {
@@ -17,6 +17,9 @@ const App: Component = () => {
     events: ['mousemove', 'touchmove'],
     initialState: false,
   });
+
+  const networkStatus = useNetwork();
+
   return (
     <div class="">
       {/* <p class="bg-green-500" ref={ref}>
@@ -28,6 +31,8 @@ const App: Component = () => {
       <p ref={ref}>hovered: {JSON.stringify(hovered())}</p>
 
       <p>idle: {JSON.stringify(idle())}</p>
+
+      <p>networkStatus: {JSON.stringify(networkStatus())}</p>
     </div>
   );
 };

src/index.ts

@@ -3,4 +3,5 @@ export * from './use-hotkeys/use-hotkeys';
 export * from './use-hover/use-hover';
 export * from './use-idle/use-idle';
 export * from './use-mounted/use-mounted';
+export * from './use-network/use-network';
 export * from './use-os/use-os';

src/use-network/use-network.ts

@@ -0,0 +1,75 @@
+import { createEffect, createSignal, onCleanup, onMount } from 'solid-js';
+
+interface NetworkStatus {
+  downlink?: number;
+  downlinkMax?: number;
+  effectiveType?: 'slow-2g' | '2g' | '3g' | '4g';
+  rtt?: number;
+  saveData?: boolean;
+  type?: 'bluetooth' | 'cellular' | 'ethernet' | 'wifi' | 'wimax' | 'none' | 'other' | 'unknown';
+}
+
+function getConnection(): NetworkStatus {
+  if (typeof navigator === 'undefined') {
+    return {};
+  }
+
+  const _navigator = navigator as any;
+  const connection: any =
+    _navigator.connection || _navigator.mozConnection || _navigator.webkitConnection;
+
+  if (!connection) {
+    return {};
+  }
+
+  return {
+    downlink: connection?.downlink,
+    downlinkMax: connection?.downlinkMax,
+    effectiveType: connection?.effectiveType,
+    rtt: connection?.rtt,
+    saveData: connection?.saveData,
+    type: connection?.type,
+  };
+}
+
+/**
+ * A hook that returns the current network status.
+ */
+export function useNetwork() {
+  const [status, setStatus] = createSignal<{ online: boolean } & NetworkStatus>({
+    online: true,
+  });
+
+  function handleConnectionChange() {
+    setStatus(current => ({ ...current, ...getConnection() }));
+  }
+
+  onMount(() => {
+    const onlineListener = () => setStatus({ online: true, ...getConnection() });
+    const offlineListener = () => setStatus({ online: false, ...getConnection() });
+    window.addEventListener('offline', offlineListener);
+
+    onCleanup(() => {
+      window.removeEventListener('online', onlineListener);
+      window.removeEventListener('offline', offlineListener);
+    });
+  });
+
+  createEffect(() => {
+    const _navigator = navigator as any;
+
+    if (_navigator.connection) {
+      setStatus({ online: _navigator.onLine, ...getConnection() });
+      _navigator.connection.addEventListener('change', handleConnectionChange);
+
+      onCleanup(() => _navigator.connection.removeEventListener('change', handleConnectionChange));
+    }
+
+    if (typeof _navigator.onLine === 'boolean') {
+      // Required for Firefox and other browsers that don't support navigator.connection
+      setStatus(current => ({ ...current, online: _navigator.onLine }));
+    }
+  });
+
+  return status;
+}