react-detect-offline

> 编程语言

Open source

Offline and Online components for React

1.3K stars0 likes2 views

Website GitHub

About

Offline and Online components for React

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

javascript

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

const App = () => (
  

);

Demo

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

Components

Simple

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

javascript

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.

javascript

 (
    

  )}
/>

Props

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

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