use-network-connection
v1.0.1
Published
A custom React hook that let's you know if the network connection status of the client application.
Downloads
2
Maintainers
Readme
📡 useNetworkConnection()
useNetworkConnection() is a custom React hook that let's you know the network connection status of the client application. (submit a issue or PR!).
Usage
Add it to your project:
yarn add use-network-connection
Use it in your React app:
// App.js
import React from 'react';
import { useNetworkConnection } from 'use-network-connection';
function App() {
const connection = useNetworkConnection();
return (
<>
<h1>Wallet</h1>
{connection.isOnline ? (
<div>
<p>Your connection is online!</p>
</div>
) : (
<div>
<p>Your connection is offline!</p>
</div>
)}
</>
);
}
useNetworkConnection()
It returns an object representing the connection information. The connection oject is extended form of Navigator Object:
Some of the custom properties of the connection object are:
isOnline
: Providestrue
when connected to the internet, orfalse
when disconnectedsince
: Time since the connection change (UNIX epoch time) innumber
isSupported
: Providestrue
when the device has network support, orfalse
when there isn't
And these values are from Navigator Object itself
downlink
: number | undefineddownlinkMax
: number | undefinedeffectiveType
: '2g' | '3g' | '4g' | 'slow-2g' | undefinedtype
: | 'bluetooth' | 'cellular' | 'ethernet' | 'mixed' | 'none' | 'other' | 'unknown' | 'wifi' | 'wimax' | undefinedrtt
: number | undefinedsaveData
: boolean | undefined