Fetch Geo Data from any IP Address in React

#webdev #rohitnirban #tutorial #ipaddress

In this tutorial, we'll explore how to retrieve geographical data from an IP address using the ipinfo API in a React application. We'll make use of the Axios library for making HTTP requests.

Prerequisites

Before we get started, ensure you have Node.js and npm installed on your machine.

Step 1: Set up a React Application

If you haven't already set up a React application, you can create one using Create React App. Open your terminal and run the following command:

npx create-react-app ipinfo-react-app

This command will create a new React application named ipinfo-react-app.

Step 2: Install Axios

Axios is a promise-based HTTP client for the browser and Node.js. We'll use it to make requests to the ipinfo API. Install Axios by running the following command in your terminal:

npm install axios

Step 3: Obtain an API Access Token

You need an access token from ipinfo to access their API. Go to ipinfo.io and sign up for an account. After signing up, you'll get an access token. Keep it handy as we'll need it in the next step.

Step 4: Fetch Geo Data using Axios

Navigate to the src directory of your React application and create a new file named GeoData.js. In this file, we'll write the code to fetch geo data from ipinfo.

// GeoData.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const GeoData = () => {
  const [geoData, setGeoData] = useState(null);
  const ipinfoToken = 'YOUR_IPINFO_ACCESS_TOKEN';

  useEffect(() => {
    const fetchGeoData = async () => {
      try {
        const response = await axios.get(`https://ipinfo.io?token=${ipinfoToken}`);
        setGeoData(response.data);
      } catch (error) {
        console.error('Error fetching geo data:', error);
      }
    };

    fetchGeoData();
  }, []);

  return (
    <div>
      <h2>Geo Data</h2>
      {geoData && (
        <ul>
          <li>IP: {geoData.ip}</li>
          <li>City: {geoData.city}</li>
          <li>Region: {geoData.region}</li>
          <li>Country: {geoData.country}</li>
          <li>Location: {geoData.loc}</li>
          <li>Organization: {geoData.org}</li>
        </ul>
      )}
    </div>
  );
};

export default GeoData;

Replace 'YOUR_IPINFO_ACCESS_TOKEN' with your actual ipinfo access token obtained in Step 3. Also, you can store your ACESS_TOKEN in env file which is the best way to do so.

Step 5: Render GeoData Component

Open App.js in the src directory and import the GeoData component we just created. Replace the existing code in App.js with the following:

// App.js
import React from 'react';
import './App.css';
import GeoData from './GeoData';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>IPInfo Geo Data</h1>
      </header>
      <GeoData />
    </div>
  );
}

export default App;

Step 6: Start the Application

Now, you can start your React application by running the following command in your terminal:

npm start

Preview

This command will start the development server, and you should be able to see your application running at http://localhost:3000. You'll see the fetched geo data displayed on the screen.

That's it! You have successfully fetched geo data from an IP address using ipinfo in a React application using Axios. Feel free to customize the UI or extend the functionality as needed.