Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
54 lines (38 sloc) 1.71 KB


Returns an object of handler setters to handle the geolocation-related events. So far, the supported methods are: onChange, invoked when the position changes and onError, invoked when an error occur while retrieving the position.
The returned object also contains the isSupported boolean flag reporting whether the geolocation API is supported.

Please note: the returned handler setters should invoked immediately in the function component's body, do not try to call this functions asynchronously.

Why? πŸ’‘

  • takes care of adding the geolocation events listeners
  • takes care of cleaning the listener when the component will unmount
  • allow to perform abstractions on geolocation related events

Basic Usage:

import { useState } from 'react';
import { useGeolocationEvents } from 'beautiful-react-hooks'; 

const GeoReporter = () => {
  const [ position, setGeoPosition] = useState();
  const [ error, setError] = useState();
  const { isSupported, onChange, onError } = useGeolocationEvents({ enableHighAccuracy: true });
  onChange((geoPosition) => setGeoPosition(geoPosition));
  onError((err) => setError(err));
  return (
     <p>Geolocation supported: {isSupported ? 'yes' : 'no'}</p>
     {!error && position && (
       <p>lat: {position.coords.latitude}, lng: {position.coords.longitude}</p>

<GeoReporter />

Mastering the hook

βœ… When to use

  • If in need to abstract some geolocation related logic into a custom hooks

πŸ›‘ What not to do

  • You can't use the returned handler setter asynchronously, it will not have any effect but changing the handler possibly leading to bugs in your code.
You can’t perform that action at this time.