@supunlakmal/hooks
Version:
A collection of reusable React hooks
59 lines • 2.26 kB
JavaScript
import { useState, useEffect } from 'react';
const initialGeolocationState = {
loading: true,
accuracy: null,
altitude: null,
altitudeAccuracy: null,
heading: null,
latitude: null,
longitude: null,
speed: null,
timestamp: null,
error: null,
};
/**
* Custom hook to track the user's geolocation.
*
* @param {UseGeolocationOptions} [options] - Optional configuration for the geolocation request (e.g., enableHighAccuracy).
* @returns {GeolocationState} An object containing the geolocation data, loading state, and error state.
*/
export const useGeolocation = (options) => {
const [state, setState] = useState(initialGeolocationState);
let watchId = null;
useEffect(() => {
if (!navigator.geolocation) {
setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false, error: new Error('Geolocation is not supported by this browser.') })));
return;
}
const onSuccess = (position) => {
setState({
loading: false,
accuracy: position.coords.accuracy,
altitude: position.coords.altitude,
altitudeAccuracy: position.coords.altitudeAccuracy,
heading: position.coords.heading,
latitude: position.coords.latitude,
longitude: position.coords.longitude,
speed: position.coords.speed,
timestamp: position.timestamp,
error: null,
});
};
const onError = (error) => {
setState((prevState) => (Object.assign(Object.assign({}, prevState), { loading: false, error: error })));
};
// Initial fetch
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
// Watch for changes
watchId = navigator.geolocation.watchPosition(onSuccess, onError, options);
// Cleanup
return () => {
if (watchId !== null) {
navigator.geolocation.clearWatch(watchId);
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [options]); // Re-run if options change
return state;
};
//# sourceMappingURL=useGeolocation.js.map