DEV Community

Cover image for Fetch Geo Data from any IP Address in React
Rohit Yadav
Rohit Yadav

Posted on

Fetch Geo Data from any IP Address in React

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

Step 6: Start the Application

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



npm start


Enter fullscreen mode Exit fullscreen mode

Preview

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.

Top comments (2)

Collapse
 
get_pieces profile image
Pieces 🌟

Thanks for sharing this. Very useful!

Collapse
 
rohitnirban profile image
Rohit Yadav

You're welcome! I'm glad you found it useful. If you have any questions or need further clarification, feel free to ask!