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.