This is a typescript project created by Abolade Greatness helping you check a user internet upload and download speed in real-time.
npm i internet-speed-checker
I'll provide support for other packages with time. Happy to collaborate with anyone. 🤝
- Easy to set up for real, you can make it work in less than 10sec!
- Super easy to customize
- Use download or upload speed component as a standalone
- Typescript supported
- JSX
import React, { useEffect, useState } from "react";
import speedChecker from "internet-speed-checker";
function App() {
const [uploadSpeed, setUploadSpeed] = useState("");
const [downloadSpeed, setDownloadSpeed] = useState("");
useEffect(() => {
const download = setInterval(() => {
const formattedDownloadSpeedString = speedChecker.getFormattedDownloadSpeed();
setDownloadSpeed(formattedDownloadSpeedString);
}, 1000);
const upload = setInterval(() => {
const formattedUploadSpeedString = speedChecker.getFormattedUploadSpeed();
setUploadSpeed(formattedUploadSpeedString);
}, 1000);
// Cleanup the interval when the component is unmounted
return () => {
clearInterval(download);
clearInterval(upload);
};
}, []); // Empty dependency array to run the effect only once on mount
return (
<div>
<p>Download Speed: {downloadSpeed}</p>
<p>Upload Speed: {uploadSpeed}</p>
</div>
);
}- TSX
import React from "react";
import speedChecker from "internet-speed-checker";
function App() {
const [uploadSpeed, setUploadSpeed] = useState<string | null>(null);
const [downloadSpeed, setDownloadSpeed] = useState<string | null>(null);
useEffect(() => {
const download = setInterval(() => {
const formattedDownloadSpeedString = speedChecker.getFormattedDownloadSpeed();
setDownloadSpeed(formattedDownloadSpeedString);
}, 1000);
const upload = setInterval(() => {
const formattedUploadSpeedString = speedChecker.getFormattedUploadSpeed();
setUploadSpeed(formattedUploadSpeedString);
}, 1000);
// Cleanup the interval when the component is unmounted
return () => {
clearInterval(download);
clearInterval(upload);
};
}, []); // Empty dependency array to run the effect only once on mount
return (
<div>
<p>Download Speed: {downloadSpeed}</p>
<p>Upload Speed: {uploadSpeed}</p>
</div>
);
}A demo is worth a thousand words
Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! Take a look at the contributing guide.
You can also find me on twitter and Linkedin. My pseudo is [thegrtnx].
Licensed under MIT