Geolocation

Docs

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 geolocation

Usage

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} />
}

Favicon History State