https://github.com/ali-master/react-network
Notifies your app when the network goes offline and back online.
https://github.com/ali-master/react-network
Last synced: about 2 months ago
JSON representation
Notifies your app when the network goes offline and back online.
- Host: GitHub
- URL: https://github.com/ali-master/react-network
- Owner: ali-master
- License: mit
- Created: 2017-09-12T05:46:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-09-12T02:09:13.000Z (over 7 years ago)
- Last Synced: 2025-04-13T00:53:39.798Z (about 2 months ago)
- Language: HTML
- Size: 83 KB
- Stars: 0
- Watchers: 1
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 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 declarative deal with that is super fantastic.
Installation
------------
```bash
npm install react-network
# or
yarn add react-network
```
And then import it:
```js
// using es modules
import Network from 'react-network'
// common.js
const Network = require('react-network').default
// AMD
// I've forgotten but it should work.
```
Or use script tags and globals.
```html
```
And then grab it off the global like so:
```js
const Network = ReactNetwork.default
```
How?
----
```render-babel
// import Network from 'react-network'
const Network = ReactNetwork.default
ReactDOM.render((
{
if (online && window.cornify_add) {
window.cornify_add()
}
}}
render={({ online }) =>
Every time you go back online, a unicorn is born!
You can open up the devtools to simulate losing the
network, or actually turn off your wifi to see these demos.
{online
? "You are online."
: "You are at a hotel."
}
}
/>
), DOM_NODE)
```
Props
-----
### `render`
Whatever you'd like to render in response to changes in the network.
```render-babel
// import Network from 'react-network'
const Network = ReactNetwork.default
ReactDOM.render((
You are online: {online ? 'Yep' : 'Nope'}.
}/>
), DOM_NODE)
```
### `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.
```render-babel
// import Network from 'react-network'
const Network = ReactNetwork.default
class 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.
)
)}
/>
)
}
}
ReactDOM.render(, DOM_NODE)
```
Legal
-----
Released under MIT license.
Copyright © 2017-present React Training LLC