Building An Internet Speed Tester In React: A Quick Guide

23 December 2023, 19:05
Reactjs

In the era of high-speed internet, knowing your network's performance is crucial. In this tutorial, we'll walk through the process of creating a simple Internet Speed Tester using React. With the help of the "speedtest-net" library, you can easily measure your download and upload speeds right from your React application.

Prerequisites

Make sure you have Node.js and npm installed on your machine. If not, you can download and install them from the official Node.js website.

Step 1: Create a React App

Begin by creating a new React app using Create React App. Open your terminal and run the following commands:

npx create-react-app react-speed-tester
cd react-speed-tester

Step 2: Install the speedtest-net Library

Install the "speedtest-net" library, which we'll use to measure internet speeds:

npm install speedtest-net

Step 3: Create the SpeedTester Component

Inside the src folder, create a new component named SpeedTester.js. This component will handle the speed test functionality.

SpeedTester.js:

import React, { useState } from 'react';
import speedTest from 'speedtest-net';

const SpeedTester = () => {
  const [speed, setSpeed] = useState(null);
  const [loading, setLoading] = useState(false);

  const testSpeed = async () => {
    setLoading(true);

    const test = speedTest({ maxTime: 5000 }); // Set a maximum time for the speed test (in milliseconds)

    test.on('data', (data) => {
      const downloadSpeed = (data.speeds.download / 1e6).toFixed(2); // Convert to Mbps
      const uploadSpeed = (data.speeds.upload / 1e6).toFixed(2); // Convert to Mbps

      setSpeed({ download: downloadSpeed, upload: uploadSpeed });
      setLoading(false);
    });

    test.on('error', (err) => {
      console.error('Speed test error:', err);
      setLoading(false);
    });
  };

  return (
    <div>
      <h2>Internet Speed Tester</h2>
      <button onClick={testSpeed} disabled={loading}>
        {loading ? 'Testing...' : 'Test Speed'}
      </button>

      {speed && (
        <div>
          <h3>Results</h3>
          <p>Download Speed: {speed.download} Mbps</p>
          <p>Upload Speed: {speed.upload} Mbps</p>
        </div>
      )}
    </div>
  );
};

export default SpeedTester;

Step 4: Integrate the SpeedTester Component

Now, integrate the SpeedTester component into the main App component.

App.js:

import React from 'react';
import SpeedTester from './SpeedTester';

const App = () => {
  return (
    <div>
      <h1>React Internet Speed Tester</h1>
      <SpeedTester />
    </div>
  );
};

export default App;

Step 5: Run the React App

Start your React app by running:

npm start

Visit http://localhost:3000 in your browser to see and test the Internet Speed Tester in action.

Conclusion

Congratulations! You've successfully built a simple Internet Speed Tester in React. This quick guide allows you to measure your network's performance directly from your React application. Feel free to customize and enhance the functionality based on your requirements.

Keep in mind that this example focuses on the frontend part of the application. In a real-world scenario, you might consider implementing a backend to store and analyze speed test results.

Happy testing! 🚀

Tagged in : react Internet Speed Tester web development Speedtest-net Library Network Performance tutorial Measurement frontend Components Applications