How I Nailed Fetching User Location in React.js (Without Losing My Mind 😅)

By Saeed Ashif Ahmed December 3, 20245 min read Updated December 4, 2024

You ever think, “How hard can getting a user’s location be?” I did. Spoiler: It’s harder than it looks—but also more fun! So here’s my journey from clueless beginner to feeling like a React geolocation ninja.

We’ll go step by step, diving deep into the why, how, and all the little quirks you might encounter when working with user location in React. Trust me, by the end of this, you’ll not only know how to do it—you’ll feel like you could teach it.

See also: How I Made the Coolest Loading Screen in ReactJS (and Lived to Tell the Tale)

Why Fetching Location is Worth It (Even If It’s a Pain)

Think about it: location-based apps are everywhere. Whether it’s food delivery, weather forecasts, or local business recommendations, knowing where your users are can be a game-changer.

For me, it was about creating a weather app that felt… smart. I wanted it to just know where the user was and display the local forecast without making them type in their city. Sounds simple, right? Except when users deny permissions, browsers throw tantrums, or API calls mysteriously fail.

But hey, challenges are what make coding fun (or so I tell myself at 2 AM).

Step 1: The Basics with `navigator.geolocation`

First stop: the navigator.geolocation API. It’s a browser-based tool for fetching location data, and it’s the quickest way to get started.

Basic Usage

Here’s the simplest version of the API:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      console.log(position.coords.latitude, position.coords.longitude);
    },
    (error) => {
      console.error(error);
    }
  );
} else {
  console.error("Geolocation is not supported by this browser.");
}

This code checks if the browser supports geolocation (most modern browsers do) and, if so, grabs the user’s latitude and longitude.

Breaking It Down

getCurrentPosition(success, error): This is the heart of the API. You pass in two callbacks—one for when it works (success) and one for when it doesn’t (error).
position.coords.latitude & position.coords.longitude: These give you the latitude and longitude of the user.
Error handling: Always include an error callback. Trust me, things will go wrong.

Common Errors

Here’s what can go wrong and how to handle it:

Permission Denied: The user clicks Deny on the location request.
Solution: Provide a fallback (like asking them to type their location).
Position Unavailable: The browser can’t determine the location.
Solution: Show a polite error message and suggest they check their device settings.
Timeout: The API takes too long to respond.
Solution: Increase the timeout in your options (more on this in a bit).

Enhancing the Code

Let’s make the code more robust:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      console.log("Latitude:", position.coords.latitude);
      console.log("Longitude:", position.coords.longitude);
    },
    (error) => {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          alert("Permission denied. Please enable location access.");
          break;
        case error.POSITION_UNAVAILABLE:
          alert("Position unavailable. Please check your device settings.");
          break;
        case error.TIMEOUT:
          alert("Request timed out. Please try again.");
          break;
        default:
          alert("An unknown error occurred.");
          break;
      }
    },
    {
      enableHighAccuracy: true,
      timeout: 10000, // 10 seconds
      maximumAge: 0,
    }
  );
} else {
  alert("Geolocation is not supported by your browser.");
}

Key Options

enableHighAccuracy: Requests more precise location data (uses GPS if available).
timeout: How long to wait before throwing a timeout error.
maximumAge: The maximum age (in milliseconds) of cached location data.

Step 2: Integrating Geolocation with React

Now let’s get serious. We’ll build a simple React component to fetch and display the user’s location.

Functional Component with Hooks

I’m all about keeping things simple, so we’ll use React hooks.

import React, { useState, useEffect } from "react";

const LocationFetcher = () => {
  const [location, setLocation] = useState({ lat: null, lon: null });
  const [error, setError] = useState(null);

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          setLocation({
            lat: position.coords.latitude,
            lon: position.coords.longitude,
          });
        },
        (err) => {
          setError(err.message);
        }
      );
    } else {
      setError("Geolocation is not supported by this browser.");
    }
  }, []);

  return (
    <div>
      <h1>User Location</h1>
      {error ? (
        <p>Error: {error}</p>
      ) : location.lat ? (
        <p>
          Latitude: {location.lat}, Longitude: {location.lon}
        </p>
      ) : (
        <p>Fetching location...</p>
      )}
    </div>
  );
};

export default LocationFetcher;

What’s Happening Here?

State Management:
location stores the latitude and longitude.
error stores any errors that occur.
useEffect: This runs once when the component mounts, triggering the geolocation request.
Conditional Rendering:
If there’s an error, it displays the error message.
If the location is available, it shows the coordinates.
Otherwise, it shows a “Fetching location…” message.

Styling It Up

Let’s make it look a bit nicer:

/* App.css */
div {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

h1 {
  font-size: 2rem;
  color: #333;
}

p {
  font-size: 1.2rem;
  color: #555;
}

Handling Permissions Gracefully

Let’s add a fallback for when the user denies permissions. This could be a manual input for the city:

const ManualInputFallback = ({ onSubmit }) => {
  const [city, setCity] = useState("");

  const handleSubmit = () => {
    if (city.trim()) onSubmit(city);
  };

  return (
    <div>
      <p>We couldn’t access your location. Please enter your city:</p>
      <input
        type="text"
        value={city}
        onChange={(e) => setCity(e.target.value)}
        placeholder="Enter your city"
      />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

You can show this component when location permissions are denied.

Step 3: Enhancing with APIs

Sometimes you want more than just raw coordinates. Let’s use an API like OpenCage Geocoder to convert coordinates into a readable address.

Fetching Location Details

Here’s how to fetch location details:

const fetchLocationDetails = async (lat, lon) => {
  const apiKey = "YOUR_API_KEY";
  const response = await fetch(
    `https://api.opencagedata.com/geocode/v1/json?q=${lat}+${lon}&key=${apiKey}`
  );
  const data = await response.json();
  return data.results[0]?.formatted || "Unknown location";
};

You can call this inside your getCurrentPosition callback:

useEffect(() => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      async (position) => {
        const { latitude, longitude } = position.coords;
        const address = await fetchLocationDetails(latitude, longitude);
        setLocation({ lat: latitude, lon: longitude, address });
      },
      (err) => setError(err.message)
    );
  }
}, []);

Final Thoughts

Fetching user location in React is a great way to enhance your app’s interactivity. Start small with navigator.geolocation, and expand with APIs for richer functionality. Remember: always respect user privacy and provide clear explanations for why you need their location.

Got stuck? Share your experience in the comments below—I’d love to help! 😊