728 x 90

Create a reusable component in React to check internet connection.

Create a reusable component in React to check internet connection.

In this tutorial, we will make a reusable component to check internet connection status in react.

In this tutorial, we will make a reusable component to check internet connection status in react.

First, let us understand how we can detect internet connection status in a browser.

For that, we will use “navigator.online” property of the window. This property returns true or false depending on your internet status.

To try it, just open developer tools and inside console type “navigator.online” , it will return true or false.

Now let’s start making our reusable component

First Step –
Create a new react app using create-react-app command
eg- npx create-react-app internet-check

Second Step-
After create new react app, open it in your code editor and inside src folder create a new folder called components and inside components create another folder called internetCheck , again inside internetCheck folder create a js file for our component called internetCheck.js
src → components → internetCheck →internetCheck.js

Now copy following code in internetCheck.js

import React from "react";
const InternetCheck = ({ message, style }) => {
  // Create a variable called internetConnection and assign it the value of navigator.online,
  // you can also do it in componentDidMount by using class component
  var internetConnection = navigator.onLine;
  return (
    <div>
      {/* Conditionally render our "p" tag based on internetConnection   variable */}
      {!internetConnection && (
        <p
          style={
            style || {
              backgroundColor: "red",
              color: "#000",
              textAlign: "center"
            }
          }
        >
          {message || "No Internet"}
        </p>
      )}
    </div>
  );
};
export default InternetCheck;

Here we are taking props called message and style and inside “p” tag we check if style and message are passed as props, if not, we have some default message and style.

Step 3-
Inside app.js inside our project src folder, we use our component by first importing it and then using it,
First, we will use our code without passing any props

import React, { Component } from "react";
import InternetCheck from "./components/InternetCheck/InternetCheck";
class App extends Component {
  render() {
    return (
      <div className="App">
        <InternetCheck />
      </div>
    );
  }
}
export default App;

Here if our internet status is offline, we get below output (Please disconnect internet to get output)

No Connection

Now we will pass props i.e message and style

import React, { Component } from "react";
import InternetCheck from "./components/InternetCheck/InternetCheck";
class App extends Component {
  render() {
    return (
      <div className="App">
        <InternetCheck
          message="No Connection"
          style={{
            color: "#fff",
            backgroundColor: "#000",
            textAlign: "center"
          }}
        />
      </div>
    );
  }
}
export default App;


Again if our internet status is offline we get below output

No connection

Hope you get how to check internet status and make a basic reusable component out of it.

For more details on navigator.onLine –
https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events

Akash
EDITOR
PROFILE

Posts Carousel

Leave a Comment

Your email address will not be published. Required fields are marked with *

Latest Posts

Top Authors

Most Commented

Featured Videos