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). As in this example, react-detect-offline pairs well with create-react-app, which creates offline-ready React apps out of the box.

API

<Online> - Component that renders its children only when the browser is online.

<Offline> - Component that renders its children only when the browser is not online.

Note: Online and Offline are mutually exclusive; if one is rendering, the other will not be.

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.

Example Uses

• Use Offline to remind users they might need to connect to complete certain actions.
• Use Online to let readers know the page is available offline.
• Use Online to hide links or other content that is irrelevant when offline.
• idk, use your dang imagination.