<NetworkSensor>

FaCC that re-renders on network status change. Uses navigator.onLine and NetworkInformation to get network connection information.

Reference

Passes through its state to the children function

interface INetworkSensorState {
  online?: boolean;
  since?: Date;
  downlink?: number;
  downlinkMax?: number;
  effectiveType?: string;
  rtt?: number;
  type?: string;
}

Props

None.

Example

import {NetworkSensor} from 'libreact/lib/NetworkSensor';

<NetworkSensor>{(state) =>
  JSON.strinfigy(state, null 4)
}</NetworkSensor>

Result

{
    "online": true,
    "since": "2018-01-20T14:20:43.063Z",
    "downlink": 2.4,
    "effectiveType": "4g",
    "rtt": 100
}

, where

• online - boolean, whether user is connected.
• since - time when online property last changed, is set to null in the beginning.
• downlink, downlinkMax, effectiveType, type, rtt - properties as provided by NetworkInformation.

withNetwork() HOC

HOC that merges net prop into enhanced component's props.

import {withNetwork} from 'libreact/lib/NetworkSensor';

const NetworkStatusFormatter = (props) =>
  <pre style={{fontFamily: 'monospace'}}>
    {JSON.stringify(props, null, 4)}
  </pre>;

const NetworkStatus = withNetwork(NetworkStatusFormatter);

<NetworkStatus />

You can overwrite the injected prop name

const NetworkStatus = withNetwork(NetworkStatusFormatter, 'network');

Or simply merge the whole object into your props

const NetworkStatus = withNetwork(NetworkStatusFormatter, '');

@withNetwork decorator

React stateful component decorator that adds net prop.

import {withNetwork} from 'libreact/lib/NetworkSensor';

@withNetwork
class MyComp extends Component {

}

Specify different prop name

@withNetwork('network')
class MyComp extends Component {

}

or merge the the whole network object into props

@withNetwork('')
class MyComp extends Component {

}