In this simple guide, we will learn how to create an Internet speed meter component in React using the react-internet-meter package.

We will create a simple React app to display the Internet speed in React. We will take help or install react internet speed meter library that is easily available through NPM.

It will show the internet speed on the browser and the total internet speed flowing in your wifi. It also helps you monitor the network connection in your React app.

We will create a React app with a separate component to track the internet speed. Let’s find out the idealistic way to calculate the broadband speed in React.

Create New React App

Open the terminal, type the command and press enter button to install the new react project.

npx create-react-app my-react-app

Head over to the app folder.

cd my-react-app

Install React Internet Meter Library

In this step, we will install the react internet meter library, and we will also install the bootstrap package.

Bootstrap library is only being used here to create the basic layout of the application. You may ignore this library if you can write the custom CSS.

npm install react-internet-meter bootstrap

Create Component File

Now, we need to build the features/ folder, hence move into the src/ directory.

Right after that, create features/InternetSpeedMeter.js file. Here is the code to create a basic functional component:

import React from 'react'

function InternetSpeedMeter() {
  return (
    <div></div>
  )
}

export default InternetSpeedMeter

Create Internet Speed Meter Component

Head over to features/InternetSpeedMeter.js file, and make sure to place the following code into the file.

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

function InternetSpeedMeter() {
  const [internetSpeed, setInternetSpeed] = useState(
    "Calculating internet speed ... "
  );

  return (
    <div>
      <ReactInternetSpeedMeter
        txtSubHeading="Internet is too slow"
        outputType="" // "alert"/"modal"/"empty"
        customClassName={null}
        txtMainHeading="Opps..."
        pingInterval={2000} // milliseconds
        thresholdUnit="megabyte" // "byte" , "kilobyte", "megabyte"
        threshold={100}
        imageUrl="https://i.postimg.cc/C1RZcJC0/wifi-signal.png"
        downloadSize="1781287" //bytes
        callbackFunctionOnNetworkDown={(speed) =>
          console.log(`Internet speed is down ${speed}`)
        }
        callbackFunctionOnNetworkTest={(speed) => setInternetSpeed(speed)}
      />

      <span className="card alert alert-success">
        <span className="card-body">
          <span className="display-2">{internetSpeed} MB/s</span>
        </span>
      </span>
    </div>
  );
}

export default InternetSpeedMeter;

Update Global Component

Our component is ready, but it won’t show on the browser. Therefore, you need to register this component into the src/App.js file.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import InternetSpeedMeter from "./features/InternetSpeedMeter";

const App = () => {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Internet Speed Meter Example</h2>
      
      <InternetSpeedMeter />
    </div>
  );
};

export default App;

Run React Server

We are now ready to start the react application, make sure to execute the following command.

npm start

Open the app on the browser with given URL:

http://localhost:3000