react-online

A react component to declaratively check connection status. Uses isomorphic-is-online to work on Web, React Native and Node.

Installation

On your command-line terminal:

npm install --save react-online

Then in your code:

// Using ES6 modules with Babel or TypeScript
import Online from "react-online";

// Using CommonJS modules
const Online = require("react-online").default;

Usage

For example, in a web environment:

import Online from "react-online";

ReactDOM.render(
  <Online
    onChange={({ online }) => {
      if (online) {
        console.log("We can reach the internet, whoop whoop!");
      }
    }}
    render={({ online }) => (
      <div style={{ textAlign: "center" }}>
        <p>
          You can open up the devtools to simulate losing the network, or
          actually turn off your wifi to test things out.
        </p>
        <h1>{online ? "You are online." : "You are offline."}</h1>
      </div>
    )}
  />,
  DOM_NODE
);

Indeed, the Online component exposes a status object to represent connectivity so that you can act accordingly:

{
  online: boolean;
}

Prop name	type	default	description
onChange	func	(status) => {}	receives the latest status object, define some side effects
render	func	(status) => null	receives the latest status object, returns the React component to render