Switch branches/tags
with-view-layout-props@0.2.0 with-view-layout-props@0.1.3 with-view-layout-props@0.1.2 with-view-layout-props@0.1.1 with-view-layout-props@0.1.0 with-resize-observer-props@0.5.0 with-resize-observer-props@0.4.1 with-resize-observer-props@0.4.0 with-resize-observer-props@0.3.1 with-resize-observer-props@0.3.0 with-resize-observer-props@0.2.0 with-resize-observer-props@0.1.0 with-page-visibility-props@0.4.0 with-page-visibility-props@0.3.0 with-page-visibility-props@0.2.0 with-page-visibility-props@0.1.0 with-online-status-props@0.3.0 with-online-status-props@0.2.0 with-online-status-props@0.1.1 with-online-status-props@0.1.0 with-match-media-props@0.4.0 with-match-media-props@0.3.0 with-match-media-props@0.2.0 with-match-media-props@0.1.2 with-match-media-props@0.1.1 with-match-media-props@0.1.0 with-log@0.5.0 with-log@0.4.0 with-log@0.3.0 with-log@0.2.0 with-log@0.1.0 with-lifecycle@0.5.0 with-lifecycle@0.4.0 with-lifecycle@0.3.0 with-lifecycle@0.2.0 with-lifecycle@0.1.1 with-lifecycle@0.1.0 with-intersection-observer-props@0.5.0 with-intersection-observer-props@0.4.0 with-intersection-observer-props@0.3.0 with-intersection-observer-props@0.2.0 with-intersection-observer-props@0.1.0 with-debugger@0.4.0 with-debugger@0.3.0 with-debugger@0.2.0 with-debugger@0.1.0 with-callback-once@0.3.0 with-callback-once@0.2.0 with-callback-once@0.1.0 with-callback-on-change@0.3.0 with-callback-on-change@0.2.0 with-callback-on-change@0.1.0 with-callback-on-change-while@0.3.0 with-callback-on-change-while@0.2.0 with-callback-on-change-while@0.1.0 throttle-handler@0.5.0 throttle-handler@0.4.0 throttle-handler@0.3.0 throttle-handler@0.2.1 throttle-handler@0.1.1 throttle-handler@0.1.0 safe-timers@0.4.0 safe-timers@0.3.0 safe-timers@0.2.0 safe-timers@0.1.0 prevent-handlers-default@0.4.0 prevent-handlers-default@0.3.0 prevent-handlers-default@0.2.1 prevent-handlers-default@0.1.0 omit-props@0.4.0 omit-props@0.3.0 omit-props@0.2.1 omit-props@0.1.1 omit-props@0.1.0 debounce-handler@0.5.0 debounce-handler@0.4.1 debounce-handler@0.4.0 debounce-handler@0.3.0 debounce-handler@0.2.1 debounce-handler@0.1.1 debounce-handler@0.1.0
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
demo
src
test
package.json
readme.md

readme.md

🔌 with-online-status-props

npm ci coverage deps

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.