network-speed-test from React ToolboxJS

Get the network speed in react.

• network-speed-test from React ToolboxJS
  • Installation- @rtbjs/network-speed-test
  • Usage
  • Issues tracker

Installation- @rtbjs/network-speed-test

To install @rtbjs/network-speed-test, simply use npm or yarn:

npm install @rtbjs/network-speed-test
# or
yarn add @rtbjs/network-speed-test

Usage

1. Import useNetworkSpeedTest hook from @rtbjs/network-speed-test.
2. Call runTest returned from the hook.
3. The result of the test can be obtained from the download and upload objects returned from the hook.

import { useNetworkSpeedTest } from '@rtbjs/network-speed-test';
import { useEffect } from 'react';

const App = () => {
  const { runTest, download, upload } = useNetworkSpeedTest();

  useEffect(() => {
    runTest();
  }, []);

  console.log('Download speed is:', download);
  console.log('Upload speed is:', upload);

  return <div>My component</div>;
};

export default App;

Run the upload test before the download test:

runTest({
  runUploadBeforeDownload: true,
});

Run only the download test:

runTest({
  upload: false,
});

Run only the upload test:

runTest({
  download: false,
});

Types:

type UseNetworkSpeedTest = {
  runTest: (options?: RunTestOptions) => void; // To run the test
  download: {
    isRunning: boolean; // If the download test is currently running
    isComplete: boolean; // If the test has been completed
    result: {
      error?: any; // Error
      elapsedTime?: number; // How much time the test took
      meanClientMbps?: number; // The speed in Mbps
      numberOfBytes?: number; // How much data has been sent
    };
  };
  upload: {
    isRunning: boolean; // If the upload test is currently running
    isComplete: boolean; // If the test has been completed
    result: {
      error?: any; // Error
      elapsedTime?: number; // How much time the test took
      meanClientMbps?: number; // The speed in Mbps
      numberOfBytes?: number; // How much data has been sent
    };
  };
  isRunning: boolean; // If one of the tests is currently running
  isComplete: boolean; // If the both tests have been completed
};

type RunTestOptions = {
  download?: boolean; // Set to false if the download test is not needed
  upload?: boolean; // Set to false if the upload test is not needed
  runUploadBeforeDownload?: boolean; // Set to true if the upload test should be run first
};

Issues tracker

Please report any issues and feature requests to: issues tracker