useGeolocation

React Sensor Hooks that tracks Geolocation

It 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

useGeolocation wraps the Geolocation API to reactively track the user’s geographic position. It returns an object with coordinates (latitude, longitude, altitude, accuracy, etc.), a locatedAt timestamp, an error object, and an isSupported flag. The hook watches for position changes and updates automatically. Standard PositionOptions (like enableHighAccuracy and timeout) can be passed as options.

When to Use

• Displaying the user’s current location on a map or providing location-aware search results
• Building geofencing features that trigger actions when users enter or leave a geographic area
• Calculating distances or directions based on the user’s real-time position

Notes

• SSR-safe: Returns default coordinates and null values during server-side rendering. No navigator.geolocation access occurs on the server.
• Permissions: The browser prompts the user for location permission. The error property captures any denial or timeout. Use alongside usePermission with "geolocation" to check permission status proactively.
• Privacy: Location data is sensitive. Only request geolocation when genuinely needed and inform users why their location is being accessed.

Usage

function Demo() {
  const { coordinates, locatedAt, error } = useGeolocation();

  return (
    <div>
      <pre lang="json">
        {JSON.stringify(
          {
            coordinates: {
              accuracy: coordinates.accuracy,
              latitude: coordinates.latitude,
              longitude: coordinates.longitude,
              altitude: coordinates.altitude,
              altitudeAccuracy: coordinates.altitudeAccuracy,
              heading: coordinates.heading,
              speed: coordinates.speed,
            },
            locatedAt,
            error: error ? error.message : error,
          },
          null,
          2,
        )}
      </pre>
    </div>
  );
};

API

useGeoLocation

Returns

{ readonly coordinates: GeolocationCoordinates; readonly locatedAt: number | null; readonly error: GeolocationPositionError | null; readonly isSupported: boolean; }: A object with the following elements:

• coordinates.
• timestamp when get coordinates.
• errors.
• Whether the browser supports geolocation.

Arguments