React custom hook for watching device connectivity status in the browser environment.
Read about Hooks feature.
npm i react-use-online
isOnline - Whether there is connection to the internet [true | false | null]
isOffline - Whether there is no connection to the internet [false | true | null]
checkConnectivity - function that checks connection to the web and updates the hook
error - Error string. Used for checking if the hook is used in browser environment and for some other errors [null | string]
Using useOnline to display connectivity with react-icons.
import React from "react";
import useOnline from "react-use-online";
const App = () => {
const { isOnline, error, checkConnectivity } = useOnline();
return (
<div>
<h1>Internet Connectivity</h1>
{isOnline ? (
<p>You are currently online.</p>
) : (
<p>You are currently offline.</p>
)}
{error && <p>An error occurred: {error.message}</p>}
<button onClick={checkConnectivity}>Check Connectivity</button>
</div>
);
};
export default App;