How to Access User Location In React

Introduction

As a web developer, understanding your user's location is essential in creating a personalized user experience. With the advancement of technology, obtaining user location has become easier than ever before. In this article, we will explore how to obtain user location using JavaScript and React.

For getting user location we will explore two methods:

1. Using Geolocation API
2. Using IP API.

1. Using Geolocation API

The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.
explore this here

Example

import axios from "axios";
import { useEffect } from "react";
import { useState } from "react";
export default function useGeoLocation() {
    const [locationData, setLocationData] = useState(null)
    useEffect(() => {
        getLocation();
    }, []);
    async function getLocation() {
        // it will return the following attributes:
        // country, countryCode, regionName, city, lat, lon, zip and timezone
        const res = await axios.get("http://ip-api.com/json");
        console.log(res);
        if (res.status === 200)
            setLocationData(res.data)
    }
    return {
        city: locationData?.city,
        lat: locationData?.lat,
        lon: locationData?.lon,
    }
}

2. Using IP API

This techniques rely on using the IP address of the user's device and various geolocation databases.

Keep in mind that using IP-based geolocation may not always provide accurate results, especially for users accessing your application through VPNs, proxies, or certain network configurations.

Additionally, relying on external services for geolocation may introduce latency and dependency on the availability and reliability of those services.

Example
In this example we will create a custom hook to call the ip api and return the attributes from it.

And the call that hoke in app.js to destruct the required fields and use it there

import axios from "axios";
import { useEffect } from "react";
import { useState } from "react";

export default function useGeoLocation() {
    const [locationData, setLocationData] = useState(null)
    useEffect(() => {
        getLocation();
    }, []);

    async function getLocation() {
        const res = await axios.get("http://ip-api.com/json");
        console.log(res);
        if (res.status === 200)
            setLocationData(res.data)
    }

    return {
        city: locationData?.city,
        country: locationData?.country,
        countryCode: locationData?.countryCode,
        lat: locationData?.lat,
        lon: locationData?.lon,
        region: locationData?.regionName,
        regionCode: locationData?.region,
        timezone: locationData?.timezone,
        zip: locationData?.zip
    }
}

app.js

import React, { useState, useEffect } from "react";
import useGeoLocation from "./useGeoLocation";

function UserLocation() {
    const { city, lat, lon } = useGeoLocation();

    return (
        <div>
            <p>City: {city}</p>
            <p>Latitude: {lat}</p>
            <p>Longitude: {lon}</p>
        </div>
    );
}

Conclusion

Obtaining user location is an essential aspect of web development that enables developers to create a personalized user experience. By using the Geolocation API provided by modern browsers and React, obtaining and displaying user location has become easier than ever before.

There are many other ways to get the user location without his/her permission. but it's generally recommended to obtain user location with their explicit permission using the Geolocation API provided by the browser. This ensures compliance with privacy regulations and offers more accurate results.

---

Exploring new concepts in #JavaScript and sharing with others is my passion and it gives me pleasure to help and inspire people. If you have any suggestion or want to add something please comment.

If you liked the post follow me on: Twitter, Linkedin and GitHub!