feat: 🎸 add useNetwork hook

Author: streamich

README.md

@@ -18,6 +18,7 @@ This is port of [`libreact`](https://github.com/streamich/libreact) to React Hoo
    - [`useLocation`](./docs/useLocation.md)
    - [`useMedia`](./docs/useMedia.md)
    - [`useMediaDevices`](./docs/useMediaDevices.md)
+   - [`useNetwork`](./docs/useNetwork.md)
    - [`useOrientation`](./docs/useOrientation.md)
    - [`useSize`](./docs/useSize.md)
    - [`useWindowSize`](./docs/useWindowSize.md)

docs/useNetwork.md

@@ -0,0 +1,29 @@
+# `useNetwork`
+
+React sensor hook that tracks connected hardware devices. Returns:
+
+```json
+{
+  "online": true,
+  "since": "2018-10-27T08:59:05.562Z",
+  "downlink": 10,
+  "effectiveType": "4g",
+  "rtt": 50
+}
+```
+
+## Usage
+
+```jsx
+import {useNetwork} from 'react-use';
+
+const Demo = () => {
+  const state = useNetwork();
+
+  return (
+    <pre>
+      {JSON.stringify(state, null, 2)}
+    </pre>
+  );
+};
+```

src/__stories__/useNetwork.story.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import {useNetwork} from '..';
+
+const Demo = () => {
+  const state = useNetwork();
+
+  return (
+    <pre>
+      {JSON.stringify(state, null, 2)}
+    </pre>
+  );
+};
+
+storiesOf('useNetwork', module)
+  .add('Example', () =>
+    <Demo/>
+  )

src/index.ts

@@ -7,6 +7,7 @@ import useLocation from './useLocation';
 import useMap from './useMap';
 import useMedia from './useMedia';
 import useMediaDevices from './useMediaDevices';
+import useNetwork from './useNetwork';
 import useOrientation from './useOrientation';
 import useSize from './useSize';
 import useTitle from './useTitle';
@@ -23,6 +24,7 @@ export {
   useMap,
   useMedia,
   useMediaDevices,
+  useNetwork,
   useOrientation,
   useSize,
   useTitle,

src/useNetwork.ts

@@ -0,0 +1,88 @@
+import {useState, useEffect} from './react';
+import {on, off} from './util';
+
+export interface NetworkState {
+  online?: boolean;
+  since?: Date;
+  downlink?: number;
+  downlinkMax?: number;
+  effectiveType?: string;
+  rtt?: number;
+  type?: string;
+}
+
+const getConnection = () => {
+  if (typeof navigator !== 'object') {
+    return null;
+  }
+  const nav = navigator as any;
+  return nav.connection || nav.mozConnection || nav.webkitConnection;
+};
+
+const getConnectionState = (): NetworkState => {
+  const connection = getConnection();
+  if (!connection) {
+    return {};
+  }
+  const {downlink, downlinkMax, effectiveType, type, rtt} = connection;
+  return {
+    downlink,
+    downlinkMax,
+    effectiveType,
+    type,
+    rtt
+  };
+}
+
+const useNetwork = (initialState: NetworkState = {}) => {
+  const [state, setState] = useState(initialState);
+
+  useEffect(() => {
+    let localState = state;
+    const localSetState = (patch) => {
+      localState = {...localState, ...patch};
+      setState(localState);
+    };
+    const connection = getConnection();
+
+    const onOnline = () => {
+      localSetState({
+        online: true,
+        since: new Date()
+      });
+    };
+    const onOffline = () => {
+      localSetState({
+        online: false,
+        since: new Date()
+      });
+    };
+    const onConnectionChange = () => {
+      localSetState(getConnectionState());
+    };
+
+    on(window, 'online', onOnline);
+    on(window, 'offline', onOffline);
+    if (connection) {
+      on(connection, 'change', onConnectionChange);
+      localSetState({
+        ...state,
+        online: navigator.onLine,
+        since: undefined,
+        ...getConnectionState(),
+      });
+    }
+
+    return () => {
+      off(window, 'online', onOnline);
+      off(window, 'offline', onOffline);
+      if (connection) {
+        off(connection, 'change', onConnectionChange);
+      }
+    };
+  }, [0]);
+
+  return state;
+};
+
+export default useNetwork;

src/useOrientation.ts

@@ -1,17 +1,17 @@
 import {useState, useEffect} from './react';
 import {on, off} from './util';
 
-export interface State {
+export interface OrientationState {
   angle: number;
   type: string;
 }
 
-const defaultState: State = {
+const defaultState: OrientationState = {
   angle: 0,
   type: 'landscape-primary'
 };
 
-const useOrientation = (initialState: State = defaultState) => {
+const useOrientation = (initialState: OrientationState = defaultState) => {
   const [state, setState] = useState(initialState);
 
   useEffect(() => {