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

NameTypeDescription
optionsobjectThis 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:

NameTypeDescription
loadingbooleanA boolean indicating if the geolocation data is currently being fetched.
accuracynumberThe accuracy of the latitude and longitude properties in meters.
altitudenumberThe altitude in meters above the mean sea level.
altitudeAccuracynumberThe accuracy of altitude in meters.
headingnumberThe direction in which the device is traveling. This value, specified in degrees, indicates how far off from heading true north the device is.
latitudenumberThe latitude in decimal degrees.
longitudenumberThe longitude in decimal degrees.
speednumberThe current ground speed of the device, specified in meters per second.
timestampnumberThe timestamp at which the geolocation data was retrieved.
errorobjectAn error object, if an error occurred while retrieving the geolocation data.

Demo:

Example:

More Hooks:

Sort: