Repository files navigation

React hookusePosition() allows you to fetch a client's browser geolocation and/or subscribe to all further geolocation changes.

▶︎Storybook demo ofusePosition() hook.

Usingyarn:

yarn add use-position

Usingnpm:

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 thelatitude,longitude andtimestamp values will be updated.

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

The second parameter ofusePosition() hook isposition options.

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

importReactfrom'react';import{usePosition}from'use-position';exportconstDemo=()=>{constwatch=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>);};

• watch: boolean - set it totrue to follow the location.
• settings: object -position options
  • settings.enableHighAccuracy - indicates the application would like to receive the most accurate results (defaultfalse),
  • settings.timeout - maximum length of time (in milliseconds) the device is allowed to take in order to return a position (defaultInfinity),
  • settings.maximumAge - the maximum age in milliseconds of a possible cached position that is acceptable to return (default0).

• 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 ornull (i.e.User denied Geolocation)