a668e8c Jan 31, 2018
1 contributor

Users who have contributed to this file

114 lines (77 sloc) 2.12 KB


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


Passes through its state to the children function

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




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

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


    "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)}

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';

class MyComp extends Component {


Specify different prop name

class MyComp extends Component {


or merge the the whole network object into props

class MyComp extends Component {