Accessing User Location in React using the Geolocation API

Imagine building a food delivery app or a local weather dashboard. You immediately need to Access User Location In React to provide relevant services to your visitors. If your app forces users to manually type their address every time, they might leave before they even order.

Modern web development relies heavily on personalization. Knowing where a user is located allows you to filter content, track shipments, or display nearby events. This guide shows you exactly how to implement this feature using modern hooks and libraries. We will turn a complex browser API into a simple feature for your application.

Understanding Geolocation in Web Apps

Geolocation is like a GPS system for your browser. It enables web applications to ask for certain geographical locations (latitude and longitude) from the browser. Most browsers, such as Chrome, Firefox, and Safari, support this functionality natively through the navigator object.

But privacy is always the top concern. The browser does not share this information without the user’s consent. When a web application attempts to locate the user’s location in a react app, the browser displays a pop-up message to either “Allow” or “Block” the application. If the user allows the application, the browser uses Wi-Fi signals, IP addresses, or the device’s GPS to locate the user’s location.

Installing react-geolocated

You can write raw JavaScript to handle coordinates, but using a dedicated library simplifies the process significantly. We will use react-geolocated. This library wraps the browser’s native API into easy-to-use React components and hooks. It handles errors and loading states for you.

Open your project terminal and run the following command to add the package to your dependencies:

npm install react-geolocated --save

Implementing the Location Logic

Now we will build a component that displays the user’s current coordinates. We will use the useGeolocated hook. This is the standard approach for accessing geolocation in react functional components.

This example covers three main states:

1. Not Supported: The browser is too old.
2. Disabled: The user clicked “Block” or has GPS off.
3. Success: We have the data.

Create a new file named LocationDisplay.jsx and add the following code:

import React from "react";
import { useGeolocated } from "react-geolocated";

const LocationDisplay = () => {
    const { coords, isGeolocationAvailable, isGeolocationEnabled } =
        useGeolocated({
            positionOptions: {
                enableHighAccuracy: false,
            },
            userDecisionTimeout: 5000,
        });

    return !isGeolocationAvailable ? (
        <div>Your browser does not support Geolocation</div>
    ) : !isGeolocationEnabled ? (
        <div>Geolocation is not enabled</div>
    ) : coords ? (
        <table>
            <tbody>
                <tr>
                    <td>Latitude</td>
                    <td>{coords.latitude}</td>
                </tr>
                <tr>
                    <td>Longitude</td>
                    <td>{coords.longitude}</td>
                </tr>
                <tr>
                    <td>Altitude</td>
                    <td>{coords.altitude}</td>
                </tr>
                <tr>
                    <td>Heading</td>
                    <td>{coords.heading}</td>
                </tr>
                <tr>
                    <td>Speed</td>
                    <td>{coords.speed}</td>
                </tr>
            </tbody>
        </table>
    ) : (
        <div>Getting the location data&hellip; </div>
    );
};

export default LocationDisplay;

The process in this case is very simple and straightforward. First, the app checks whether your browser supports location services. If it doesn’t, the app will inform you that your browser may be outdated or not compatible. The next step involves checking whether you have enabled location access. If you clicked on “Block,” the app will notify you that location services are disabled.

If all is well and you have enabled access, the app will wait for your location data. After it has obtained your location, it will automatically update the table to display your latitude and longitude. This is very simple and convenient if you want to obtain your current location using the app.

Conclusion

The integration of location services is a great addition to the user experience. We have discussed how to install the library, manage different location states, and display the coordinates. You can now Access User Location In React to create smarter features for your users. Whether you are creating a fitness app or a store locator, these tools are what you need.