How to create a Location finder app using ReactJS ?

IP address finder app using ReactJS

Last Updated : 19 Jun, 2023

In this article, we will be building an IP address finder app that lets you find your client’s approximate location on a map. An IP address is a unique address that identifies a device on the internet or a local network. IP stands for “Internet Protocol,” which is the set of rules governing the format of data sent via the internet or local network. Through this article, we will learn how to get the user’s IP address as well as display his/her approximate location on a map.

Lets take a look at how the final application will look like:

Prerequisites: The pre-requisites for this project are:

Creating a React application and Module installation:

Step 1: Create a react application by typing the following command in the terminal:

npx create-react-app ip-finder

Step 2: Now, go to the project folder i.e ip-finder by running the following command:

cd ip-finder

Step 3: Install some npm packages required for this project using the following command:

npm install axios 
npm install react-map-gl
npm install react-icons

Project Structure: It will look like this:

Example: Let us grab the Mapbox API key required for this project. Follow the simple steps below:

Go to the website: https://www.mapbox.com/ and create a free account.
Go to your account dashboard and at the bottom of the page you will find a section named “Access tokens”.

Copy the default public access token and save it somewhere to use it later.

Example:

App.js: In this file, we will fetch the user’s IP address using a free open-source API named https://ipapi.co/ (free plan: 1000 requests/day).
Map.js: Now write down the following code in the Map.js component.
Note: Replace <YOUR_API_KEY> with your own Mapbox public access token.
App.css: This file contains the styling of the webpages.

Javascript

// App.js 
  
import { useEffect, useState } from 'react'; 
import Axios from 'axios'; 
import Map from './components/Map'; 
import './App.css'; 
  
function App() { 
  
    // Setting up the initial state variables 
    const [ipDetails, setIpDetails] = useState([]); 
    const [lat, setLat] = useState(22.5726); 
    const [lon, setLon] = useState(88.3832); 
  
    // Fetching the API once when the 
    // component is mounted 
    useEffect(() => { 
        Axios.get('https://ipapi.co/json/').then((res) => { 
            setIpDetails(res.data); 
            setLat(res.data.latitude); 
            setLon(res.data.longitude); 
        }); 
    }, []) 
  
    return ( 
        <> 
            <h1 className="heading">IP Address Finder</h1> 
            <div className="App"> 
                <div className="left"> 
                    <h4>What is my IPv4 address?</h4> 
                    <h1 id="ip">{ipDetails.ip}</h1> 
                    <h4>Approximate location: </h4> 
  
                    <p>{ipDetails.city}, {ipDetails.region}, 
                        {ipDetails.country_name}.</p> 
  
  
                    <h4>Internet Service Provider(ISP):</h4> 
  
                    <p>{ipDetails.org}</p> 
  
                </div> 
                <Map lat={lat} lon={lon} /> 
            </div> 
        </> 
    ); 
} 
  
export default App;

Javascript

// Map.js 
  
import React, { useEffect, useState } from 'react'; 
import ReactMapGL, { Marker } from 'react-map-gl'; 
import { RiUserLocationFill } from 'react-icons/ri'; 
  
const API_KEY = '<YOUR_API_KEY>'; 
  
const Map = ({ lat, lon }) => { 
  
    // Setting up the initial viewport of the map 
    const [viewport, setViewport] = useState({ 
        latitude: lat, 
        longitude: lon, 
        zoom: 14, 
        bearing: 0, 
        pitch: 0, 
        width: '100%', 
        height: '100%', 
    }); 
  
    // Viewport re-renders whenever latitude 
    // and longitude changes 
    useEffect(() => { 
        const a = { ...viewport }; 
        a.latitude = lat; 
        a.longitude = lon; 
        setViewport(a); 
    }, [lat, lon]); 
  
    return ( 
        <div className="map"> 
            <ReactMapGL 
                mapboxApiAccessToken={API_KEY} 
                {...viewport} 
                onViewportChange={(viewport) => setViewport(viewport)} 
                mapStyle="mapbox://styles/mapbox/streets-v11"> 
                <Marker latitude={lat} longitude={lon}> 
                    <div className="mark"> 
                        <RiUserLocationFill size="25px" color="blue" /> 
                    </div> 
                </Marker> 
            </ReactMapGL> 
        </div> 
    ); 
}; 
  
export default Map;

CSS

/* App.js */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); 
  
.App { 
    height: 70vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
  
.left { 
    box-sizing: border-box; 
    padding-left: 80px; 
    width: 40%; 
} 
  
.map { 
    width: 550px; 
    height: 350px; 
    border: 4px solid #1453dc; 
} 
  
.mark { 
    padding: 40px; 
    border-radius: 50%; 
    background-color: #d2d8fabe 
} 
  
.heading { 
    font-size: 60px; 
    text-align: center; 
    text-decoration: underline; 
    font-family: 'Pacifico', cursive; 
    color: #1453dc; 
} 
  
p { 
    font-size: 20px; 
    color: #1453dcaf; 
} 
  
#ip { 
    color: #1453dc; 
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

App demo

How to create a Location finder app using ReactJS ?

anomic30

News

Improve

Article Tags :

Similar Reads

IP address finder app using ReactJS

In this article, we will be building an IP address finder app that lets you find your client's approximate location on a map. An IP address is a unique address that identifies a device on the internet or a local network. IP stands for "Internet Protocol," which is the set of rules governing the form

How to create a Location finder app using ReactJS ?

In this article, we will be building a location finder app that lets you search for different places on a map. Our app contains two sections, one for displaying the marker on the map and the other is for searching different places. For rendering the map and getting the coordinates for the searched l

Build an Admin Panel using ReactJS

The Admin Panel project is a web application built using ReactJS, a popular JavaScript library for building user interfaces. The Admin Panel is designed to provide a centralized and user-friendly interface. It provides a user interface for managing various aspects of a platform, such as viewing rece

Movie Search Engine Using React and API

In this article, we will create Movie Search Engine using ReactJS. In this movie search engine the user can search for movies which they want to know about and the search engine will fetch a list of movies from that keyword and display the result in the forms of card. A default search has been loade

Build a simple Song Lyrics Finder app using ReactJS

React is a super-awesome front-end library that we can use to build user interfaces. In this article, we will be building a simple application to find the lyrics of any song. This is a perfect project for beginners as it will teach you how to fetch information using an API and display that informati

News App using React

News App using React JS uses React's basic principles to fetch the latest news from a News API and show them to users based on their interests. It's a simple project to create an interactive and personalized news-viewing experience. Preview of final output: Let us have a look at how the final output

Recipe Finder using ReactJS

In this project article, we will be creating a recipe finder application using the React library. We have given the application the name "GeeksforGeeks Recipe Finder". This application is completely developed in ReactJS and mainly focuses on the functional components and also manages the various sta

Crowdfunding App using React

In this article, we will create a Crowdfunding App using React. The React crowdfunding app features multiple projects, each with a set fundraising goal. Users can contribute by entering donation amounts, and the app dynamically tracks progress toward each goal. Preview of final output: Let us have a

Movie Trailer app using ReactJS

In this article, we are going to make a simple app that searches for any movie/web series trailers. The users can search for their favourite movie trailers using this application. The API will fetch the trailer from the internet and display it on the webpage. We will use 'movie-trailer' npm package

Build a Dictionary App Using React Native

In this article, we are going to implement a Dictionary app using React Native. The app allows users to effortlessly search for word meanings, access definitions, listen to pronunciations, and examine example sentences. Preview of final output: Let us look at what the final output will look like. Pr