Skip to content
🌍 React hook usePosition() for fetching and following a browser geolocation
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook Add storybook. Jun 29, 2019
demo Add loader to Demo. Jun 30, 2019
src Add possibility to provide settings. Jun 29, 2019
stories Add more stories. Jun 29, 2019
tests Add loader to Demo. Jun 30, 2019
.babelrc Configure build process. Jun 29, 2019
.eslintrc.js Integrate with ESlint. Jun 29, 2019
.gitignore Add tests. Jun 29, 2019
.travis.yml Add code coverage integration. Jun 29, 2019
LICENSE Initial commit Jun 29, 2019
jest.config.js Add tests. Jun 29, 2019
package.json v0.0.6 Jun 29, 2019
rollup.config.js Bump version. Jun 29, 2019
yarn.lock Add husky support. Jun 29, 2019

React hook for following a browser geolocation

Build Status npm version codecov

React hook usePosition() allows you to fetch 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';

Fetching client location

const { latitude, longitude, timestamp, accuracy, error } = usePosition();

Following client location

In this case if browser detects geolocation change the latitude, longitude and timestamp values will be updated.

const { latitude, longitude, timestamp, accuracy, error } = usePosition(true);

Following client location with highest accuracy

The second parameter of usePosition() hook is position options.

const { latitude, longitude, timestamp, accuracy, error } = usePosition(true, {enableHighAccuracy: true});

Full example

import React from 'react';
import { usePosition } from '../src/usePosition';

export const Demo = () => {
  const { latitude, longitude, timestamp, accuracy, error } = usePosition(true);

  return (
      latitude: {latitude}<br/>
      longitude: {longitude}<br/>
      timestamp: {timestamp}<br/>
      accuracy: {accuracy && `${accuracy}m`}<br/>
      error: {error}


usePosition() input

  • watch: 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() output

  • latitude: number - latitude (i.e. 52.3172414),
  • longitude: number - longitude (i.e. 4.8717809),
  • timestamp: number - timestamp when location was detected (i.e. 1561815013194),
  • accuracy: number - location accuracy in meters (i.e. 24),
  • error: string - error message or null (i.e. User denied Geolocation)
You can’t perform that action at this time.