React Tutorial- React Function Component Detect Internet Network Status Example

In this React post, we will learn how to check the internet network connection’s online status and offline status using React Js. We will be using the window.ononline, window.onoffline APIs and React hooks in a functional component.

 

The way we are going to use in this React tutorial to build the functionality is the function Component with useState and useEffect hooks.

The useEffect hook helps us handle side effects in React components.

The useState and useEffect hooks will help us check if the device is connected correctly to the internet in React.

 

How To Check The Internet Network Connection’s Online And Offline Status

Step 1- Install The New React App

The basic step is just to install a new React app using create-react-app. So, we will be using the given command for downloading the new project:

npx create-react-app react-blog-app

Now, we have to enter the project folder:

cd react-blog-app

 

Step 2- Build The Function Component

Here, we need to build the function component in order to build features with pure JavaScript functions.

Further, we make the components/ folder with the Network.js file.

The below command will be used to build the function component:

import React from 'react'
function Network() {
  return (
    <div></div>
  )
}
export default Network

 

Step 3- Setting Up Bootstrap

Now, we are going to set up the Bootstrap library that offers the complete UI solution and also provides tons of UI components:

npm i bootstrap

Afterward, we need to register the bootstrap.min.css path in the App.js file:

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
function App() {
  return <div></div>;
}
export default App;

 

Step 4- Network Status Images

Then, in this step, we have to make another folder within the src/ directory and name it img/.

We have to keep the Connection Lost and Network Connected images within this.

 

Step 5- Detect Network Status In React

Now, we will import the images from the img asset folder. The useState hook will update the network connection status when the network is alive or not.

Further, we update the given code within the components/Network.js file:

import React, { useState, useEffect } from "react";
import connected from "../img/connected.jpg";
import networkLost from "../img/connection-lost.jpg";
function Network() {
  const [status, setStatus] = useState(() => {
    if (navigator.onLine) {
      console.log("Connected to network.");
      return true;
    } else {
      return false;
    }
  });
  useEffect(() => {
    window.ononline = (e) => {
      console.log("Connected to network.");
      setStatus(true);
    };
    window.onoffline = (e) => {
      console.log("Network connection lost.");
      setStatus(false);
    };
  }, [status]);
  return (
    <div>
      <h2 className="mb-3">React Detect Network Connection Status Example</h2>
      {status ? (
        <>
          <div className="alert alert-success mb-3">
            Network is fullly connected
          </div>
          <img src={connected} width={420} alt="Logo" />
        </>
      ) : (
        <img src={networkLost} width={420} alt="Logo" />
      )}
    </div>
  );
}
export default Network;

 

Step 6- Update The Global Component

The App() function is located in the App.js file. This simple method invokes on React app load and commemorates another component in one go. So, we import and register the Network component here:

import Network from "./components/Network";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
function App() {
  return (
    <div className="container">
      <Network />
    </div>
  );
}
export default App;

 

Step 7- Start React App

The given command has to be used finally for running the React app on the browser:

npm start

 

Conclusion

In this React js tutorial, we have seen how to create that functionality that allows us to check the internet connection status in React. The developer can easily know if the internet is connected or if the internet connection is lost or slow in React.

 

Thanks