react-offline

React component that notifies when browser is either offline or online.

Install

yarn add react-offline
# or
npm install react-offline

Usage

// 3rd-party imports

import ReactDOM from "react-dom";
import React, { Component } from "react";

import Offline from "react-offline";

// function as child component

ReactDOM.render(
  <Offline
    onChange={({ isOffline, isOnline }) => console.log({ isOffline, isOnline })}
  >
    {({ isOffline, isOnline }) => {
      return isOffline ? (
        <div>{"I am offline"}</div>
      ) : (
        <div>{"I am online"}</div>
      );
    }}
  </Offline>,
  mountNode
);

// render prop

ReactDOM.render(
  <Offline
    onChange={({ isOffline, isOnline }) => console.log({ isOffline, isOnline })}
    render={({ isOffline, isOnline }) => {
      return isOffline ? <div>I am offline</div> : <div>I am online</div>;
    }}
  />,
  mountNode
);

Props

render (optional)

An optional function that is called whenever the browser's network connectivity has changed (e.g. switching between online and offline).

The render function is invoked with an object argument: ({ isOffline, isOnline }).

It's expected that render function returns a single React element. This has same API semantics as React.Component.render().

If render function is given, it has precedence over any given child component:

<Offline
  render={() => {
    return <div>"I take precedence over any function as child component."</div>;
  }}
>
  {() => {
    return <div>"I will not render."</div>;
  }}
</Offline>

Function as child component (optional)

Same as render prop function (see above).

If render function is not given, then the child component will be invoked as a function.

The child component function is invoked with an object argument: ({ isOffline, isOnline }).

<Offline>
  {({ isOffline, isOnline }) => {
    return isOffline ? <div>{"I am offline"}</div> : <div>{"I am online"}</div>;
  }}
</Offline>

onChange (optional)

An optional function that is called whenever the browser's network connectivity has changed (e.g. switching between online and offline).

The onChange function is invoked with an object argument: ({ isOffline, isOnline }).

License

MIT.