React Network 当网络掉线和重连在线时通知您的应用程序

React Network

What?

Notifies your app when the network connection goes online or offline.

Why?

Because the next billion users of the internet will have a decent device but a spotty connection. Having a component to help you declaratively deal with that is super fantastic.

Installation

npm install react-network# oryarn add react-network

And then import it:

// using es modulesimport Network from 'react-network'// common.jsconst Network = require('react-network').default// AMD// I've forgotten but it should work.

Or use script tags and globals.

And then grab it off the global like so:

const Network = ReactNetwork.default

How?

// import Network from 'react-network'const Network = ReactNetwork.defaultReactDOM.render(( { if (online && window.cornify_add) { window.cornify_add() } }} render={({ online }) =>

Props

render

Whatever you'd like to render in response to changes in the network.

// import Network from 'react-network'const Network = ReactNetwork.defaultReactDOM.render((

You are online: {online ? 'Yep' : 'Nope'}.

onChange

Called whenever the network goes on or offline. This is useful to fire off some imperative code, like adding unicorns to the page or more practically, avoiding resource fetching until the network comes back online.

// import Network from 'react-network'const Network = ReactNetwork.defaultclass App extends React.Component { state = { image: null } handleNetworkChange = ({ online }) => { if (online) { this.fetch() } else { clearTimeout(this.timeout) } } fetch = () => { fetch('https://unsplash.it/640/400/?random') .then(res => res.blob()) .then(blob => { var image = URL.createObjectURL(blob) this.setState({ image }) this.timeout = setTimeout(this.fetch, 5000) }) } render() { return (

{this.state.image ? ( ) : (

Loading first image

)} ( online ? null : (

You are offline, images will continue when you get back online.

) )} />