React Tutorial- How To Check Internet Connection Speed In React Js

This React Js tutorial is about those series of steps that will lead us to create an internet speed meter in react Js that helps us check the internet connection speed in run time.

We will get to know about the above-mentioned from scratch. So, no need to worry even if you a novice in this field. let’s now start the tutorial step by step:

Step 1- Set Up A New React Project

First of all, we need to set the environment on our system by installing a new React app using the below command:

npx create-react-app react-blog-app

Since we have created the app, we now need to move inside the app:

cd react-blog-app

 

Step 2- Build The Functional Component

Building the functional component is quite simple for which the code is given below.

We will make the components/ folder after which we create the ConnectionSpeed.js file within this folder:

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

 

Step 3- Add The React Inetermnet Meter Module

Since we need a third-party module, the below command will be used in order to add the React internet meter library in React:

npm install react-internet-meter

 

Step 4- Incorporate The Bootstrap In React

In this step, we are going to install the bootstrap module in React. This package allows us to create basic layout in react.

But it has to be kept in mind that installing the package is just optional:

npm i bootstrap

Further, we open the src/App.js file and then import the Bootstrap CSS in the file:

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

 

Step 5- Build The Internet Speed Meter

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

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

We will 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;

 

Step 6- Register Component In App Js

Afterward, we need to open the App.js file and import the new component:

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;

 

Step 7- Start The React App

Now, we will run the app by invoking the below command:

npm start

 

Conclusion

So, friends, we have come to the end of this React tutorial in which we have learned how to display the internet connection speed on the browser with the help of a third-party library.

 

Thanks