useGeolocation

https://github.com/streamich/react-use/blob/master/docs/useGeolocation.md

React sensor hook that tracks user's geographic location.

💡 Implementation

Pretty

Copy

1
const useGeolocation = () => {
  const [state, setState] = useState({
    accuracy: null,
    altitude: null,
    altitudeAccuracy: null,
    heading: null,
    latitude: null,
    longitude: null,
    speed: null,
    timestamp: Date.now()
  });
  let mounted = true;
  let watchId;
  const onEvent = event => {
    if (mounted) {
      setState({
        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 onError = error => {
    setState(error);
  };
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(onEvent, onError);
    watchId = navigator.geolocation.watchPosition(onEvent, onError);
    return () => {
      mounted = false;
      navigator.geolocation.clearWatch(watchId);
    };
  }, [0]);
  return state;
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

🚀 Usage

Pretty

Copy

1
function Demo() {
  const state = useGeolocation();
  return <pre>{JSON.stringify(state, null, 2)}</pre>;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

⚡Preview

{
  "accuracy": null,
  "altitude": null,
  "altitudeAccuracy": null,
  "heading": null,
  "latitude": null,
  "longitude": null,
  "speed": null,
  "timestamp": 1756429791275
}

🚨 console

💄 Improve this hook

Contributors

Raathigeshan