React hook for following a browser geolocation


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.


Installation

Using yarn:

``bash
yarn add use-position
`

Using npm:

`bash
npm i use-position --save
`

Usage

Import the hook:

`javascript
import { usePosition } from 'use-position';
`

$3

`javascript
const {
latitude,
longitude,
speed,
timestamp,
accuracy,
heading,
error,
} = usePosition();
`

$3

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

`javascript
const watch = true;
const {
latitude,
longitude,
speed,
timestamp,
accuracy,
heading,
error,
} = usePosition(watch);
`

$3

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

`javascript
const watch = true;
const {
latitude,
longitude,
speed,
timestamp,
accuracy,
heading,
error,
} = usePosition(watch, { enableHighAccuracy: true });
`

$3

`javascript
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 (

latitude: {latitude}

longitude: {longitude}

speed: {speed}

timestamp: {timestamp}

accuracy: {accuracy && ${accuracy} meters}

heading: {heading && ${heading} degrees}

error: {error}

);
};
`

Specification

$3

- 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).

$3

- latitude: 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`)