react-online
v1.0.6
Published
React component that tells you if you are online or offline
Downloads
1
Maintainers
Readme
react-online
A react component to declaratively check connection status. Uses isomorphic-is-online to work on Web, React Native and Node.
Installation
On your command-line terminal:
npm install --save react-online
Then in your code:
// Using ES6 modules with Babel or TypeScript
import Online from "react-online";
// Using CommonJS modules
const Online = require("react-online").default;
Usage
For example, in a web environment:
import Online from "react-online";
ReactDOM.render(
<Online
onChange={({ online }) => {
if (online) {
console.log("We can reach the internet, whoop whoop!");
}
}}
render={({ online }) => (
<div style={{ textAlign: "center" }}>
<p>
You can open up the devtools to simulate losing the network, or
actually turn off your wifi to test things out.
</p>
<h1>{online ? "You are online." : "You are offline."}</h1>
</div>
)}
/>,
DOM_NODE
);
Indeed, the Online
component exposes a status object to represent connectivity so that you can act accordingly:
{
online: boolean;
}
| Prop name | type | default | description | | --------- | ---- | ---------------- | ------------------------------------------------------------------------ | | onChange | func | (status) => {} | receives the latest status object, define some side effects | | render | func | (status) => null | receives the latest status object, returns the React component to render |