Alert when internet speed go below threshold

React is growing day by day. We can now create PWA/TWAs using it and for lot of developers developing IoT based solutions internet is the backbone of system.

Problems

• Websites usually miss behave on low network
• We might not able to render everything app and we can build light weight app to which we want to switch when low network is encountered
• We might want to warn user when network is below threshold.

We will we building small app using react-internet-meter.

Basic setup

npx create-react-app internet-meter
cd internet-meter
npm i react-internet-meter
npm start

This will create react app and after that we can start our code

Creating file structure

/src
--/App.js
--/components
----/home.js
----/SingleCard.js
--/assets
----/styles.css

SingleCard.js

import React from "react";
const SingleCards = ({
iconName,
txtMain,
txtInfo
}) => {
return(
<span className='card'>
 <span className='card-main-heading'>
  {txtMain}
 </span>
 <span className='card-info'>
    <ion-icon name={iconName}></ion-icon>
    <span className='card-info-msg'>
     {txtInfo}
    </span>
   </span>
  </span>
 )
}
export default SingleCards

This component we will reuse to show the items

Home.js

import React from "react";
import SingleCards from "./SingleCard";
import './../assets/styles.css'
const HomePage = ({wifiSpeed}) => {
const data = [
{iconName:'car-sport-outline',
 txtMain:'Tesla',
 txtInfo:'80%',
 key:'1'},
{iconName:'headset-outline',
 txtMain:'Headset',
 txtInfo:'80%',
 key:'2'},
{iconName:'thermometer-outline',
 txtMain:'Temperature',
 txtInfo:'17°C',
 key:'3'},
{iconName:'wifi-outline',
 txtMain:'Wifi',
 txtInfo:`${wifiSpeed} MB/s`,key:'4'},]
return(
<div className='home-container'>
  <p>Smart App</p>
  <div className='card-container'>
   {data.map(item => <SingleCards {...item}/>)}
  </div>
</div>
 )
}
export default HomePage

Styles.css

.home-container{
height: 100vh;
background-color: black;
font-size: 20px;
color: #fff;
margin: 0px;
padding: 30px 0;
}
.home-container p{
font-size: 40px;
text-align: center;
}
.card-container{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-content: center;
}
.card{
height: 150px;
width: 150px;
margin: 10px;
padding: 5px;
border-radius: 5px;
box-shadow: 0px 0px 10px #fff;
display: flex;
flex-direction: column;
text-align: center;
}
.card-main-heading{
flex-grow: 1;
}
.card-info ion-icon{
flex-grow: 2;
margin: 0 50px;
}
.card-info{
flex-grow: 5;
font-size: 60px;
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
padding: auto;
}
.card-info-msg{
font-size: 20px;
}

And finally App.js

import React,{useState} from 'react'
import { ReactInternetSpeedMeter } from 'react-internet-speed-meter'
import 'react-internet-speed-meter/dist/index.css'
import HomePage from './components/Home'
const App = () => {
const [wifiSpeed,setwifiSpeed] = useState("Checking ... ")
return (
<div>
 <ReactInternetSpeedMeter
 txtSubHeading="Internet is too slow"
 outputType="alert"
 customClassName={null}
 txtMainHeading="Opps..."
 pingInterval="4000" // sec
 thresholdUnit='megabyte' // "byte" , "kilobyte", "megabyte"
 threshold={100}
 callbackFunctionOnNetworkDown={(speed)=>console.log(`Internet speed    down ${speed}`)}
 callbackFunctionOnNetworkTest={(speed)=>setwifiSpeed(speed)}/>
  <HomePage
   wifiSpeed={wifiSpeed}/> 
 </div>
)}
export default App

I want to have minimum of 100 MB/sec speed. So i gave threshold of 100 and thresholdUnit is ‘megabyte’. And now when Internet speed go down to threshold it give alert as shown on top image. And on interval of 4 sec it will check internet speed and run callback function.

Conclusion

In this short article we created the app using react-internet-meter. It not only tell if machine is online or offline it also tell if internet speed is below threshold. As it is root cause of many problem for IoT based software solutions. If you like and this help you in any way please applaud and give star to the git repo here