How to check internet connection(online or offline) in React

To check the internet connection in React application, you can use the navigator.onLine property which returns a Boolean indicating whether the browser is online or offline. You can add event listeners for the online and offline events and update the online status in the component's state.

Here's an example to learn how to check internet connection(online or offline) in React component:

import React, { useState, useEffect } from "react";

function App() {
  	const [isOnline, setIsOnline] = useState(navigator.onLine);
  		
  	useEffect(() => {
    	function onlineHandler() {
      		setIsOnline(true);
    	}
	
    	function offlineHandler() {
      		setIsOnline(false);
    	}
	
    	window.addEventListener("online", onlineHandler);
    	window.addEventListener("offline", offlineHandler);

	
    	return () => {
      		window.removeEventListener("online", onlineHandler);
      		window.removeEventListener("offline", offlineHandler);
    	};
  	}, []);

	
  	return (
    	<div>
      		{isOnline ? (
        		<p>You are online.</p>
      		) : (
        		<p>You are offline. Please check your internet connection.</p>
      		)}
    	</div>
  	);
}

export default App;

In this example, we are using the useState hook to store the online status of the application in a state. Also, we are using the useEffect hook to add event listeners for the online and offline events. When the online status changes, the event was triggered, and the setIsOnline function is invoked to update the state.

The "online" event is a built-in JavaScript event that will be triggered when the browser detects an active internet connection in the device. We are adding "online" event listener to the window object using window.addEventListener("online", onlineHandler); which will be triggered when the device goes online, and inside onlineHandler  we are calling the function setIsOnline() to update the state isOnline into true.

The window.removeEventListener("online", onlineHandler) method removes the event listener that was added earlier for the "online" event. We have given the removeEventListener function in the return statement of useEffect hook to ensure that the event is no longer listened to the event when the component gets unmounted. This can help to prevent potential memory leaks and performance issues caused by unnecessary active event listeners.

Finally, based on the state isOnline, we output a message. If the user is online, we display a message that says "You are online." If the user is offline, we display a message that says "You are offline. Please check your internet connection."

This approach works for most modern browsers, but keep in mind that the navigator.onLine property may not be reliable in all cases.

Using react-detect-offline package

The react-detect-offline package can help you to check the internet connection in React with a minimum line of code. 

Here is an example of how you can implement this using the react-detect-offline package:

First, install the package using npm or yarn:

# For npm
npm install react-detect-offline

#For yarn
yarn add react-detect-offline

Next import the Offline and Online components from the package:

import { Offline, Online } from "react-detect-offline";

Use the Offline and Online components to render different elements based on the online status:

function App() {
  	return (
    	<div>
      		<Online>
        		<p>You are online.</p>
      		</Online>
      		<Offline>
        		<p>You are offline. Please check your internet connection.</p>
      		</Offline>
    	</div>
  	);
}

In this example, we use the Online and Offline components to render different content based on the online status of the application. If the user is online, child components of <Online> will be rendered and when the user is offline, child components of <Offline> will be rendered.

The react-detect-offline package uses the navigator.onLine property internally to check the internet connection.But the main advantage of using this package is that it provides an easy-to-use API for rendering different content based on the online status of the application.

Conclusion

To check internet connection(online or offline) in React, you can use the navigator.onLine property, which returns a boolean value indicating whether the browser is currently online or not. This approach involves using the useState and useEffect hooks to keep track of the online status and add event listeners for the online and offline events. As another option, you can use of react-detect-offline package that simplifies the process of checking internet connection in a React application. This package provides Online and Offline components that can be used to conditionally render content based on the user's device network connectivity.