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.
Permalink
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
.editorconfig
.eslintrc.js Integrate with ESlint. Jun 29, 2019
.gitignore Add tests. Jun 29, 2019
.huskyrc.json
.travis.yml Add code coverage integration. Jun 29, 2019
LICENSE Initial commit Jun 29, 2019
README.md
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

README.md

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.

Installation

Using yarn:

yarn add use-position

Using npm:

npm i use-position --save

Usage

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 (
    <code>
      latitude: {latitude}<br/>
      longitude: {longitude}<br/>
      timestamp: {timestamp}<br/>
      accuracy: {accuracy && `${accuracy}m`}<br/>
      error: {error}
    </code>
  );
};

Specification

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.