Geolocation React Hook

useGeolocation.ts

import { useState, useEffect } from "react"

interface Coordinates {
  latitude: number
  longitude: number
}

interface GeoLocationError extends Error {
  name: string
}

interface GeoLocationState {
  coordinates: Coordinates | null
  error: GeoLocationError | null
}

function useGeoLocation(): GeoLocationState {
  const [state, setState] = useState<GeoLocationState>({
    coordinates: null,
    error: null,
  })

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const { latitude, longitude } = position.coords
          setState({
            coordinates: { latitude, longitude },
            error: null as unknown as GeoLocationError,
          })
        },
        (error) => {
          setState({
            coordinates: null,
            error: error as unknown as GeoLocationError,
          })
        }
      )
    } else {
      setState({
        coordinates: null,
        error: new Error("Geolocation not supported"),
      })
    }
  }, [])

  return state
}

export default useGeoLocation