Home

Awesome

npm npm downloads gzip size badges

Offline and Online components for React

Components that track offline and online state. Render certain content only when online (or only when offline).

import { Offline, Online } from "react-detect-offline";

const App = () => (
  <div>
    <Online>Only shown when you're online</Online>
    <Offline>Only shown offline (surprise!)</Offline>
  </div>
);

Demo

Check out chris.bolin.co/offline for a simple example (source code).

Components

Simple

<Online/> and <Offline/> - Components that render their children only when the browser is online/offline.

<Offline>You're offline right now. Check your connection.</Offline>

Advanced

<Detector render={({ online }) => ...}/> - Component that calls its render prop every time the connection state changes. The render prop is supplied with an object with an online boolean value. Recommended for more complex cases, e.g. when styles need to be changed with connection status.

<Detector
  render={({ online }) => (
    <div className={online ? "normal" : "warning"}>
      You are currently {online ? "online" : "offline"}
    </div>
  )}
/>

Props

<Online/>, <Offline/>, and <Detector/> accept the following props:

PropTypeDescriptionDefault
pollingObj or BoolConfig for polling fallback [1][see below]
polling.enabledBooleanForce polling on or offDepends on the browser [1]
polling.urlStringURL to pool for connection status"https://ipv4.icanhazip.com"
polling.intervalNumberHow often (in ms) to poll5000
polling.timeoutNumberHow long (in ms) before timeout5000
onChangeFunctionCalled when connection changesnone
children [2]Element(s)Children not Detectornone
render [3]FuncRender function Detector onlynone

[1] Polling is only used as a fallback for browsers that don't support the "online" event. Currently these are Chrome on Windows, Firefox on Windows, and Chrome on Linux.

[2] <Online/> and <Offline/> only. <Detector/> will not render children.

[3] <Detector/> only

Browser Support

The web spec we rely on is supported by IE 9+, Chrome 14+, Firefox 41+, and Safari 5+ - that's 94% of worldwide (98% of US) browser traffic. A polling fallback is used for browsers that don't implement the spec in a useful way (see note [1] in the above Props section).

Contributing

This package is maintained by cwise89 (and was initially created by chrisbolin).

PRs are welcome!