
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
use-position
Advanced tools
React hook usePosition()
allows you to fetch a client's browser geolocation and/or subscribe to all further geolocation changes.
▶︎ Storybook demo of usePosition()
hook.
Using yarn
:
yarn add use-position
Using npm
:
npm i use-position --save
Import the hook:
import { usePosition } from 'use-position';
const {
latitude,
longitude,
speed,
timestamp,
accuracy,
heading,
error,
} = usePosition();
In this case if browser detects geolocation change the latitude
, longitude
and timestamp
values will be updated.
const watch = true;
const {
latitude,
longitude,
speed,
timestamp,
accuracy,
heading,
error,
} = usePosition(watch);
The second parameter of usePosition()
hook is position options.
const watch = true;
const {
latitude,
longitude,
speed,
timestamp,
accuracy,
heading,
error,
} = usePosition(watch, { enableHighAccuracy: true });
import React from 'react';
import { usePosition } from 'use-position';
export const Demo = () => {
const watch = true;
const {
latitude,
longitude,
speed,
timestamp,
accuracy,
heading,
error,
} = usePosition(watch);
return (
<code>
latitude: {latitude}<br/>
longitude: {longitude}<br/>
speed: {speed}<br/>
timestamp: {timestamp}<br/>
accuracy: {accuracy && `${accuracy} meters`}<br/>
heading: {heading && `${heading} degrees`}<br/>
error: {error}
</code>
);
};
usePosition()
inputwatch: boolean
- set it to true
to follow the location.settings: object
- position options
settings.enableHighAccuracy
- indicates the application would like to receive the most accurate results (default false
),settings.timeout
- maximum length of time (in milliseconds) the device is allowed to take in order to return a position (default Infinity
),settings.maximumAge
- the maximum age in milliseconds of a possible cached position that is acceptable to return (default 0
).usePosition()
outputlatitude: number
- latitude (i.e. 52.3172414
),longitude: number
- longitude (i.e. 4.8717809
),speed: number | null
- velocity of the device in meters per second (i.e. 2.5
),timestamp: number
- timestamp when location was detected (i.e. 1561815013194
),accuracy: number
- location accuracy in meters (i.e. 24
),heading: number | null
- direction in which the device is traveling, in degrees (0
degrees - north, 90
degrees - east, 270
degrees - west, and so on),error: string
- error message or null
(i.e. User denied Geolocation
)FAQs
React hook for fetching and following browser location
The npm package use-position receives a total of 869 weekly downloads. As such, use-position popularity was classified as not popular.
We found that use-position demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.