@hocs/with-online-status-props

🔌 with-online-status-props

Part of a collection of Higher-Order Components for React, especially useful with Recompose.

Dynamically map online/offline status to props using navigator.onLine (Can I use?).

Install

yarn add @hocs/with-online-status-props

Usage

withOnlineStatusProps(
  mapStatusToProps: (onlineStatus: Object) => Object,
): HigherOrderComponent

import React from 'react';
import withOnlineStatusProps from '@hocs/with-online-status-props';

const Demo = (props) => (
  <h1>props: {JSON.stringify(props)}</h1>
);

export default withOnlineStatusProps(
  ({ isOnline, isOffline }) => ({ isOnline, isOffline })
)(Demo);

📺 Check out live demo.

Notes

• Target Component will be just passed through on unsupported platforms (i.e. global.navigator.onLine is undefined) like with Server-Side Rendering. This means that there will be no status (i.e. undefined) which might be expected, but you can take care of it using Recompose defaultProps HOC if it's really necessary.