ro

react-offline

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

Showing:

Popularity

Downloads/wk

9

GitHub Stars

7

Maintenance

Last Commit

3yrs ago

Contributors

4

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

react-offline Build Status npm version

Greenkeeper badge

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial