flysky66 / react-detect-offline

Offline and Online components for React

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.