useGeolocation

cURL wget

React hook to handle geolocation

Example

Demo Code

import useGeolocation from "@/hooks/useGeolocation";

export default function UseGeolocationExample() {
  const {
    loading,
    accuracy,
    latitude,
    longitude,
    altitude,
    altitudeAccuracy,
    heading,
    speed,
    timestamp,
    error,
  } = useGeolocation({
    enableHighAccuracy: true,
    maximumAge: 0,
    timeout: Infinity,
  });

  return (
    <div className="flex flex-col items-center justify-center gap-4 p-4 text-ctp-text">
      <p>The geolocation is {loading ? "loading" : "loaded"}.</p>
      <table className="w-full table-auto border-collapse p-2">
        <thead>
          <tr>
            <th>Property</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-ctp-surface1">
          <tr>
            <td>Accuracy</td>
            <td>{accuracy}</td>
          </tr>
          <tr>
            <td>Latitude</td>
            <td>{latitude}</td>
          </tr>
          <tr>
            <td>Longitude</td>
            <td>{longitude}</td>
          </tr>
          <tr>
            <td>Altitude</td>
            <td>{altitude}</td>
          </tr>
          <tr>
            <td>Altitude Accuracy</td>
            <td>{altitudeAccuracy}</td>
          </tr>
          <tr>
            <td>Heading</td>
            <td>{heading}</td>
          </tr>
          <tr>
            <td>Speed</td>
            <td>{speed}</td>
          </tr>
          <tr>
            <td>Timestamp</td>
            <td>{timestamp}</td>
          </tr>
          {error && (
            <tr>
              <td>Error</td>
              <td>{error.message}</td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}

Code

import { useEffect, useState } from "react";

export interface IGeolocationPositionError {
  readonly code: number;
  readonly message: string;
  readonly PERMISSION_DENIED: number;
  readonly POSITION_UNAVAILABLE: number;
  readonly TIMEOUT: number;
}

export interface GeoLocationSensorState {
  loading: boolean;
  accuracy: number | null;
  altitude: number | null;
  altitudeAccuracy: number | null;
  heading: number | null;
  latitude: number | null;
  longitude: number | null;
  speed: number | null;
  timestamp: number | null;
  error?: Error | IGeolocationPositionError;
}

/**
 * React hook to handle geolocation
 * @param {PositionOptions} options - The options for the geolocation
 * @returns {GeoLocationSensorState} - The state of the geolocation
 */
const useGeolocation = (options?: PositionOptions): GeoLocationSensorState => {
  const [state, setState] = useState<GeoLocationSensorState>({
    loading: true,
    accuracy: null,
    altitude: null,
    altitudeAccuracy: null,
    heading: null,
    latitude: null,
    longitude: null,
    speed: null,
    timestamp: Date.now(),
  });
  let mounted = true;
  let watchId: any;

  const onEvent = (event: any) => {
    if (mounted) {
      setState({
        loading: false,
        accuracy: event.coords.accuracy,
        altitude: event.coords.altitude,
        altitudeAccuracy: event.coords.altitudeAccuracy,
        heading: event.coords.heading,
        latitude: event.coords.latitude,
        longitude: event.coords.longitude,
        speed: event.coords.speed,
        timestamp: event.timestamp,
      });
    }
  };
  const onEventError = (error: IGeolocationPositionError) =>
    mounted && setState((oldState) => ({ ...oldState, loading: false, error }));

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(onEvent, onEventError, options);
    watchId = navigator.geolocation.watchPosition(
      onEvent,
      onEventError,
      options,
    );

    return () => {
      mounted = false;
      navigator.geolocation.clearWatch(watchId);
    };
  }, []);

  return state;
};

export default useGeolocation;