🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

use-position

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

use-position

React hook for fetching and following browser location

1.0.0
latest
Source
npm
Version published
Weekly downloads
907
-5.42%
Maintainers
1
Weekly downloads
 
Created
Source

React hook for following a browser geolocation

npm version codecov

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:

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,
  speed,
  timestamp,
  accuracy,
  heading,
  error,
} = usePosition();

Following client location

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

Following client location with the highest accuracy

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

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

Full example

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>
  );
};

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),
  • 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)

Keywords

react

FAQs

Package last updated on 26 Oct 2021

Did you know?

Socket

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.

Install

Related posts