use-position
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/use-position package

    0.0.8 • Public • Published

    React hook for following a browser geolocation

    Build Status 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,
      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,
      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,
      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,
        error,
      } = usePosition(watch);
     
      return (
        <code>
          latitude: {latitude}<br/>
          longitude: {longitude}<br/>
          speed: {speed}<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),
    • 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),
    • error: string - error message or null (i.e. User denied Geolocation)

    Install

    npm i use-position

    DownloadsWeekly Downloads

    1,535

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    9.04 kB

    Total Files

    4

    Last publish

    Collaborators

    • trekhleb