useGeoLocation.ts

import { useEffect, useRef, useState } from 'react';

type GeoState =
  | {
      status: 'idle';
    }
  | {
      status: 'success';
      state: GeolocationPosition;
    }
  | {
      status: 'error';
      error: GeolocationPositionError;
    };

export const useGeoLocation = (options: PositionOptions = {}) => {
  const [state, setState] = useState<GeoState>({ status: 'idle' });
  const watchId = useRef<number>();

  useEffect(() => {
    const onSuccess: PositionCallback = res => {
      setState(prev => ({
        ...prev,
        status: 'success',
        state: res,
        error: null,
      }));
    };
    const onError: PositionErrorCallback = err => {
      setState(prev => ({
        ...prev,
        status: 'error',
        error: err,
        state: null,
      }));
    };

    watchId.current = navigator.geolocation.watchPosition(
      onSuccess,
      onError,
      options,
    );

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

  return state;
};