React higher-order component for detecting network offline state
JavaScript Groovy HTML
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.ci
example
src
test
.babelrc
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
jest.config.js
package.json

README.md

react-offline-hoc

npm version Build Status Coverage Status Dependencies

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.