Offline and Online components for React
JavaScript
Switch branches/tags
Latest commit 2265ad6 Sep 13, 2017 @chrisbolin committed on GitHub Update README.md
Permalink
Failed to load latest commit information.
demo initial lib and CRA demo Jul 30, 2017
dist add dist of babel-compiled lib Jul 30, 2017
src add dist of babel-compiled lib Jul 30, 2017
.gitignore ignore npm logs Jul 30, 2017
.npmignore npm ignore demo Jul 30, 2017
README.md Update README.md Sep 13, 2017
package.json 1.0.4 Aug 26, 2017
yarn.lock add dist of babel-compiled lib Jul 30, 2017

README.md

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