Docs
Geolocation
Geolocation
Access and monitor a user's geolocation (after they give permission)
About
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
| 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. |
Installation
Run the following command:
npx scriptkavi-hooks@latest add geolocationUsage
import { useGeolocation } from "@/hooks/geolocation"import * as React from "react"
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} />
}