Skip to content

Latest commit

 

History

History
187 lines (164 loc) · 3.34 KB

README.md

File metadata and controls

187 lines (164 loc) · 3.34 KB
Raw

NetworkMonitor

A Network Monitor Component returns online status and also information about the system's connection in terms of general connection type (e.g., 'Wi-Fi, 'cellular', etc.). Which can be used to select high-definition content or low-definition content based on the user's connection.

Demo

A minimal Demo Link

Usage/Examples

Value Used as a Description
NetworkMonitor ✅ Component Can be used as Component
networkMonitor ✅ Service Can be used as Service
1. Here's an example of basic usage with Default Import:
// Default import will return NetworkMonitor Component
import NetworkMonitor from 'fe-pilot/NetworkMonitor';

<NetworkMonitor /> // Used as a Component
2. Here's an example of basic usage with Multiple Import:
import { NetworkMonitor, networkMonitor } from 'fe-pilot/NetworkMonitor';

<NetworkMonitor /> // Used as a Component

networkMonitor(); // Used as a Service
3. Here's an example of a advanced usage:
import { NetworkMonitor, OfflineToast, OnlineToast } from 'fe-pilot/NetworkMonitor';

const successCb = (response) => {
  console.log("success response:", response);
}

const failureCb = (response) => {
  console.log("failure response:", response);
}

return (
  <NetworkMonitor successCb={successCb} failureCb={failureCb}>
    <OfflineToast />
    <OnlineToast />
  </NetworkMonitor>
);

Props

Props Type Description Response
successCb Function It will be called on success 
{
    data: "Can be array/object/string/number",
    msgType: "SUCCESSFUL",
    msg: "A success msg",
    status: "SUCCESS"
}
loadingCb Function It will be called before success/failure. 
{
  msgType: "LOADING",
  msg: "LOADING...",
  status: "LOADING"
}
failureCb Function It will be called on failure 
{
  msgType: "ERROR",
  msg: "A failed msg",
  status: "FAILURE"
}
Props Type Description Default Values
showForever Boolean To hide/remove unsupported feature, make it false. Default value is true.

Child Component

Child Type Description
OfflineToast Element A offline toast, will be appear as user goes offline
OnlineToast Element A online toast, will be appear as user goes from offline to online 
graph TD;
    NetworkMonitor--->OfflineToast;
    NetworkMonitor--->OnlineToast;
Loading