useGeolocation
Access and monitor a user's geolocation (after they give permission) with useGeolocation.
Install:
npm i @uidotdev/usehooks
Description:
The useGeolocation hook is useful for accessing and monitoring the user’s geolocation (after they give permission) in a React application. By utilizing the hook, developers can easily retrieve the user’s current position, including latitude, longitude, altitude, accuracy, heading, speed, and timestamp.
Parameters
| Name | Type | Description | | ------- | ------ | ----------- | | options |
object | This is an optional configuration object provided when calling
useGeolocation. It is used when calling
navigator.geolocation.getCurrentPosition() and
navigator.geolocation.watchPosition(). Some of the attributes it accepts are
enableHighAccuracy, timeout, and maximumAge. |
Return Values
The hook returns an object containing the following properties:
| Name | Type | Description |
|---|---|---|
| loading | boolean | A boolean indicating if the geolocation data is currently being fetched. |
| accuracy | number | The accuracy of the latitude and longitude properties in meters. |
| altitude | number | The altitude in meters above the mean sea level. |
| altitudeAccuracy | number | The accuracy of altitude in meters. |
| heading | number | The direction in which the device is traveling. This value, specified in degrees, indicates how far off from heading true north the device is. |
| latitude | number | The latitude in decimal degrees. |
| longitude | number | The longitude in decimal degrees. |
| speed | number | The current ground speed of the device, specified in meters per second. |
| timestamp | number | The timestamp at which the geolocation data was retrieved. |
| error | object | An error object, if an error occurred while retrieving the geolocation data. |
Demo:
Example:
import * as React from "react";
import { useGeolocation } from "@uidotdev/usehooks";
import Demo from "./Demo";
export default function App() {
return (
<section>
<h1>useGeolocation</h1>
<Location />
</section>
);
}
function Location() {
const state = useGeolocation();
if (state.loading) {
return <p>loading... (you may need to enable permissions)</p>;
}
if (state.error) {
return <p>Enable permissions to access your location data</p>;
}
return <Demo state={state} />;
}