node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »


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


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