react-cloak
An offline manager
Install
npm install --save react-cloak
Description
react-cloak
allows you to display an indication whenever the user goes offline or back online,
or simply to act upon a change in the connectivity status.
Usage
react-cloak
offers 2 exported assets: a component and a hook.
The component allows you to render children based on desired status.
It accepts the following parameters:
-
onOffline:
Type: callback (optional)
Description: If passed, this callback will be called when the user goes offline. -
onOnline:
Type: callback (optional)
Description: If passed, this callback will be called when the user goes online. -
renderWhen:
Type: online | offline (optional - "offline" by default)
Description: Lets you choose when to render the component, default is when offline, can be set to opposite.
The hook returns a boolean value, the value of which is true
when the user is offline, and false
when the is online.
It accepts the following parameters:
-
onOffline:
Type: callback (optional)
Description: If passed, this callback will be called when the user goes offline. -
onOnline:
Type: callback (optional)
Description: If passed, this callback will be called when the user goes online.
In-order to use the assets, simply import them into your project, then use it to display whichever indication suits your needs.
Example:
import React from "react";
import Cloak, { useCloak } from "react-cloak";
import Page1 from "pages/page1";
import Page2 from "pages/page2";
function App() {
const onOffline = () => console.log('offline');
const onOnline = () => console.log('online');
// Hook without parameters:
const isOffline = useCloak();
// Hook with parameters:
useCloak({
onOffline,
onOnline,
});
return (
// Component without parameters:
<Cloak>
<div>You are currently offline. Some of the features may not work as intended.</div>
</Cloak>
// Component with parameters:
<Cloak
onOffline={onOffline}
onOnline={onOnline}
renderWhen='online'
>
<div>You are currently online. Most features should work as intended.</div>
</Cloak>
<Page1 />
<Page2 />
);
}
License
MIT © tomleb3