Skip to content
Offline and Online components for React
Branch: master
Clone or download


Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci upgrade node version in CI (#29) Mar 28, 2019
demo add to demo May 11, 2019
dist build May 11, 2019
src Update index.js (#42) May 11, 2019
.babelrc Add unit tests Sep 8, 2017
.eslintrc.json formidable eslint Mar 29, 2018
.gitignore Add unit tests Sep 8, 2017
.npmignore npm ignore demo Jul 30, 2017
LICENSE MIT license Sep 27, 2017 limit badges: version, downloads, gzip, license Mar 31, 2019
package.json 2.4.0 - bugfix. allow _any_ response from server to count as online May 11, 2019
yarn.lock upgrade yarn Mar 28, 2019

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 = () => (
    <Online>Only shown when you're online</Online>
    <Offline>Only shown offline (surprise!)</Offline>


Check out for a simple example (source code).



<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>


<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.

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


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

Prop Type Description Default
polling Obj or Bool Config for polling fallback [1] [see below]
polling.enabled Boolean Force polling on or off Depends on the browser [1]
polling.url String URL to pool for connection status ""
polling.interval Number How often (in ms) to poll 5000
polling.timeout Number How long (in ms) before timeout 5000
onChange Function Called when connection changes none
children [2] Element(s) Children not Detector none
render [3] Func Render function Detector only none

[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).


PRs are welcome!

  • Test: yarn test
  • Build: yarn build. Make sure you commit the build file (dist/index.js)
You can’t perform that action at this time.