UseGeolocation

1'use client';
2 
3import { useCallback, useEffect, useRef, useState } from 'react';
4 
5export interface GeolocationState {
6  position: GeolocationPosition | null;
7  error: GeolocationPositionError | null;
8  isLoading: boolean;
9  clearWatch: () => void;
10}
11 
12export function useGeolocation(options?: PositionOptions): GeolocationState {
13  const [position, setPosition] = useState<GeolocationPosition | null>(null);
14  const [error, setError] = useState<GeolocationPositionError | null>(null);
15  const [isLoading, setIsLoading] = useState<boolean>(true);
16 
17  const watchId = useRef<number | null>(null);
18 
19  const clearWatch = useCallback(() => {
20    if (watchId.current !== null && 'geolocation' in navigator) {
21      navigator.geolocation.clearWatch(watchId.current);
22      watchId.current = null;
23    }
24  }, []);
25 
26  useEffect(() => {
27    if (!('geolocation' in navigator)) {
28      setError({
29        code: 0,
30        message: 'Geolocation API not supported',
31      } as GeolocationPositionError);
32      setIsLoading(false);
33      return;
34    }
35 
36    const onSuccess = (pos: GeolocationPosition) => {
37      setPosition(pos);
38      setError(null);
39      setIsLoading(false);
40    };
41 
42    const onError = (err: GeolocationPositionError) => {
43      setError(err);
44      setPosition(null);
45      setIsLoading(false);
46    };
47 
48    navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
49 
50    const id = navigator.geolocation.watchPosition(onSuccess, onError, options);
51    watchId.current = id;
52 
53    return () => {
54      clearWatch();
55    };
56  }, [options, clearWatch]);
57 
58  return { position, error, isLoading, clearWatch };
59}