React component that notifies when browser is either offline or online.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
.travis.yml
LICENSE
README.md
nwb.config.js
package.json
yarn.lock

README.md

react-offline Build Status npm version

Greenkeeper badge

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

NOTE: A few days after this library was initially published, react-network was published; so you may prefer to use that instead of react-offline.

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.