react-offline-hocdeprecated

React higher-order component for detecting network offline state

Usage no npm install needed!

<script type="module">
  import reactOfflineHoc from 'https://cdn.skypack.dev/react-offline-hoc';
</script>

README

react-offline-hoc

npm version Build Status Coverage Status

react-offline-hoc is a React higher-order component factory to enhance your existing components with an isOnline prop that indicates the online/offline status of the application.

This HOC uses the browser's native window.navigator.onLine property and its online/offline events to determine the current offline state.

API

this.props.isOnline

A true value for the isOnline prop indicates that the client has an active connection to the network. Disconnecting from the network (desktop) or enabling airplane mode (mobile) will change isOnline to false.

import React from 'react';
import withOfflineState from 'react-offline-hoc';

const MyComponent = ({ isOnline }) => (
  <div>
    Connectivity is currently: {isOnline ? 'online' : 'offline'}
  </div>
);

export default withOfflineState(MyComponent);

Example

A simple application that uses react-offline-hoc is provided in the example/ directory. To run it:

$ cd example/
$ npm install
$ npm run start
# Local server available at localhost:8080

Try connecting and disconnecting from the network and observe the resulting behavior.