useGeolocation

Easy way of dealing with geolocation.

Installation

npx rabbithook@latest add use-geolocation

Usage

App.tsx

import useGeolocation from "@/hooks/use-geolocation";

function Component() {
  const { loading, error, data } = useGeolocation();

  if (loading) {
    return <p>Loading...</p>
  }

  if (error) {
    return <p>Error: {error.message}</p>
  }

  return (
    <p>{JSON.stringify(data)}</p>
  )
}

Code

Typescript

use-geolocation.ts

import { useState, useEffect } from "react"

type IUseGeolocationProps = PositionOptions;

type IGeolocation = {
  latitude: number;
  longitude: number;
  altitude: number | null;
  speed: number | null;
}

function useGeolocation(options: IUseGeolocationProps = {}) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<GeolocationPositionError | null>(null);
  const [data, setData] = useState({} as IGeolocation);

  useEffect(() => {
    const successHandler = (event: GeolocationPosition) => {
      const { latitude, longitude, altitude, speed } = event.coords;
      setLoading(false);
      setError(null);
      setData({ latitude, longitude, altitude, speed });
    }

    const errorHandler = (error: GeolocationPositionError) => {
      setLoading(false);
      setError(error);
    }

    navigator.geolocation.getCurrentPosition(successHandler, errorHandler, options);
    const id = navigator.geolocation.watchPosition(successHandler, errorHandler, options);

    return () => navigator.geolocation.clearWatch(id);
  }, [options])

  return { loading, error, data };
}

export default useGeolocation;

Javascript

use-geolocation.js

import { useState, useEffect } from "react"

function useGeolocation(options) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [data, setData] = useState({});

  useEffect(() => {
    const successHandler = (event) => {
      const { latitude, longitude, altitude, speed } = event.coords;
      setLoading(false);
      setError(null);
      setData({ latitude, longitude, altitude, speed });
    }

    const errorHandler = (error) => {
      setLoading(false);
      setError(error);
    }

    navigator.geolocation.getCurrentPosition(successHandler, errorHandler, options);
    const id = navigator.geolocation.watchPosition(successHandler, errorHandler, options);

    return () => navigator.geolocation.clearWatch(id);
  }, [options])

  return { loading, error, data };
}

export default useGeolocation;