How to Check Internet Connection Speed in React 18

Last Updated on March 4, 2024 by Digamber in React JS

Recently I was working on a React project. The client asked, can we measure internet speed in React.

I got a task where I had to find out the internet connection speed in React.

I created an Internet speed meter component in React that informs about the internet speed or network connection speed.

I will share my experience calculating Internet Connection Speed using the react-internet-meter module in React function component.

In this uncomplicated post, you will go through a series of steps and comprehend how to create an internet speed meter in React that helps you check the internet connection speed in run time.

You’ll be taught how to prepare a brand-new React application from scratch. How to create a functional component.

How to install the external module to track or alert when internet speed goes below the defined threshold.

Set Up New React Project

It may not be possible to get started without having a React app. I am sure that you have already added node and npm.

If the app is not ready, you can do it by running the below command.

npx create-react-app react-blog-app

You have created the app. Your next task is to move inside the app.

cd react-blog-app

Build Functional Component

We need a functional component; It’s just a simple JavaScript function. Below is the code example for React function component.

Make the components/ folder, next create the ConnectionSpeed.js file within the folder.

import React from 'react'

function Profile() {
  return (
    <div>ConnectionSpeed page</div>
  )
}

export default ConnectionSpeed

Add React Internet Meter Module

As we said earlier we need a third-party module. Here is the command that adds the react internet meter library in React.

npm install react-internet-meter --legacy-peer-deps

Incorporate Bootstrap in React

You are going to install a Bootstrap module in React. This package will allow us to create a basic layout in React. However, this package is not mandatory.

npm i bootstrap --legacy-peer-deps

Open the src/App.js component; and, you have to import the bootstrap CSS in the file.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

function App() {
  return <div></div>;
}

export default App;

Build Internet Speed Meter

The ReactInternetSpeedMeter is a generic component; It needs to be imported from the “react-internet-meter” package.

You can pass various properties in the ReactInternetSpeedMeter component to determine internet speed in React.

Place the code into the components/ConnectionSpeed.js file.

import React from "react";
import "../../node_modules/react-internet-meter/dist/index.css";
import { ReactInternetSpeedMeter } from "react-internet-meter";

function ConnectionSpeed() {
  const [checkSpeed, SetCheckSpeed] = React.useState(
    "Finding internet speed."
  );

  return (
    <div>
      <h2 className="mb-3">React Find Internet Speed Example</h2>

      <ReactInternetSpeedMeter
        txtSubHeading="Internet connection is slow"
        outputType="" // "alert"/"modal"/"empty"
        customClassName={null}
        pingInterval={2000} // milliseconds
        txtMainHeading="Opps..."
        thresholdUnit="megabyte" // "byte" , "kilobyte", "megabyte"
        threshold={50}
        imageUrl="https://i.postimg.cc/sft772VP/speedometer.png"
        downloadSize="1561257" //bytes
        callbackFunctionOnNetworkDown={(data) =>
          console.log(`Internet speed : ${data}`)
        }
        callbackFunctionOnNetworkTest={(data) => SetCheckSpeed(data)}
      />

      <div className="card-body mt-4">
        <span className="display-1">{checkSpeed} MB/s</span>
      </div>
    </div>
  );
}

export default ConnectionSpeed;

Register Component in App JS

After that, you have to open the App.js file and import the new component we completed in the previous step.

import ConnectionSpeed from "./components/ConnectionSpeed";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

function App() {
  return (
    <div className="container">
      <ConnectionSpeed />
    </div>
  );
}

export default App;

Start React Application

Run the react project by invoking the given command and internet speed on the browser.

npm start

http://localhost:3000

Conclusion

In this post, we successfully learned how to display the internet connection speed on the browser with the help of a third-party library.

From now on, you can easily find the network speed using React app.