useGeolocation()

The useGeolocation() hook tracks the user‘s geographic location using the Geolocation API. It handles permissions, loading states, and updates automatically when the user moves (using watchPosition).

Import

typescript

import { useGeolocation } from 'the-react-hooks';

Usage

Click the button below to request browser location permissions.

Component.tsx

import { useGeolocation } from 'the-react-hooks';

export const Component = () => {
  const { loading, error, latitude, longitude } = useGeolocation();

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

  return (
    <div>
      <p>Latitude: {latitude}</p>
      <p>Longitude: {longitude}</p>
    </div>
  );
}

API

Arguments

This hook accepts an optional options object:

enableHighAccuracy – boolean Provides a hint that the application would like to receive the best possible results.
timeout – number The maximum length of time (in milliseconds) that is allowed to pass from the call until the corresponding coordinates are returned.
maximumAge – number Indicates that the application would accept a cached position whose age is no greater than the specified time.

Returns

Returns a state object with the following properties:

loading – boolean True while the browser is resolving the location.
latitude – number | null The latitude in decimal degrees.
longitude – number | null The longitude in decimal degrees.
error – GeolocationPositionError | null Error object if the location retrieval fails.
accuracy – number | null The accuracy of the latitude and longitude properties in meters.
timestamp – number | null The time at which the location was retrieved.

PrevioususeFetch NextuseHistory