react-detect-offline

!gzip size
!badges

$3

Components that track offline and online state. Render certain content only when online (or only when offline).

``jsx
import { Offline, Online } from "react-detect-offline";

const App = () => (



);
`

$3

Check out chris.bolin.co/offline for a simple example (source code).

$3

#### Simple

and - Components that render their children only when the browser is online/offline.

`jsx
You're offline right now. Check your connection.
`

#### Advanced

...}/> - 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._

`jsx
render={({ online }) => (



)}
/>
`

$3

, , and 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 | "https://ipv4.icanhazip.com" |
| 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] and only. will not render children.

[3] only

$3

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

$3

This package is maintained by cwise89 (and was initially created by chrisbolin).

PRs are welcome!

* Test: yarn test
* Build: yarn build. Make sure you commit the build file (dist/index.js`)