react-fns – Browser APIs turned into declarative React components and HOCs

react-fns is a collection of imperative Browser API’s turned into declarative React components and higher-order components for lots of common situations.

The <Network /> component for example is a wrapper around the Network Information API.

import { Network } from 'react-fns';

const Example = () => (
  <Network
    render={({ online, offlineAt }) => (
      <div>
        {online ? 'Online!' : 'Offline'}
        {offlineAt && `Last connected ${offlineAt.toISOString()}`}
      </div>
    )}
  />
);

export default Example;

Next to using this component and its render prop, an alternative using an HOC withNetwork is also available.

Other supported APIs include DeviceMotion, DeviceOrientation, GeoPosition, Windows Scroll Offset, etc.

react-fns – Browser APIs turned into declarative React components and HOCs →