DEV Community

Pol Nisenblat
Pol Nisenblat

Posted on

Free Location Detection in React — One Hook, Zero Configuration

#react #typescript #javascript

Adding location awareness to a React app usually means signing up for a geocoding service, managing API keys, and writing fallback logic. What if you could skip all of that?

30-Second Setup

npm install @bigdatacloudapi/react-reverse-geocode-client
import { useGeoLocation } from '@bigdatacloudapi/react-reverse-geocode-client';

function App() {
  const { data, loading, error, source } = useGeoLocation();

  if (loading) return <p>Detecting location...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>📍 {data?.city}, {data?.countryName}</h1>
      <p>Region: {data?.principalSubdivision}</p>
      <p>Detected via: {source}</p>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

That's the entire integration. No API key, no account, no configuration.

How It Works

The useGeoLocation() hook implements a two-tier detection strategy:

  1. GPS first — requests the browser's geolocation (user sees a permission prompt)
  2. Automatic IP fallback — if GPS is denied or unavailable, resolves location from the user's IP address

Both paths return the identical JSON structure. Your UI code doesn't need to handle two different response formats.

Why It's Free

There's no catch. When the hook sends GPS coordinates, the browser also reveals its IP address. This anonymous pairing helps BigDataCloud continuously validate their IP geolocation accuracy — which they benchmark daily in a public accuracy report. You provide location context, they provide the geocoding. Fair exchange.

Features

• ✅ No API key — works out of the box
• ✅ GPS with automatic IP fallback
• ✅ 100+ languages ({ language: 'ja' } for Japanese)
• ✅ Full TypeScript types
• ✅ SSR/Next.js compatible
• ✅ Manual trigger mode for "Detect My Location" buttons

Multi-language Example

const { data } = useGeoLocation({ language: 'ja' });
// data.countryName → "日本"
// data.city → "東京"
Enter fullscreen mode Exit fullscreen mode

Manual Trigger

function SearchButton() {
  const { data, loading, refresh } = useGeoLocation({ manual: true });

  return (
    <button onClick={refresh} disabled={loading}>
      {loading ? 'Detecting...' : 'Detect My Location'}
    </button>
  );
}
Enter fullscreen mode Exit fullscreen mode

Next.js / SSR

Works in client components:

'use client';
import { useGeoLocation } from '@bigdatacloudapi/react-reverse-geocode-client';
Enter fullscreen mode Exit fullscreen mode

Fair Use

The free client-side API is for production client-side use only. For development and testing, use the server-side API with a free API key. See the fair use policy.

Links

• 📦 npm
• 💻 GitHub
• 🌐 BigDataCloud

Also available for Vue/Nuxt: @bigdatacloudapi/vue-reverse-geocode-client

Canonical URL: https://www.bigdatacloud.com/blog/free-location-detection-in-react

Top comments (0)