All Projects → trekhleb → Use Position

trekhleb / Use Position

Licence: mit
🌍 React hook usePosition() for fetching and following a browser geolocation

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Use Position

Leku
🌍 Map location picker component for Android. Based on Google Maps. An alternative to Google Place Picker.
Stars: ✭ 612 (+166.09%)
Mutual labels:  location, geolocation
Pelias Android Sdk
Android sdk for pelias
Stars: ✭ 20 (-91.3%)
Mutual labels:  location, geolocation
React Native Geolocation
Geolocation APIs for React Native
Stars: ✭ 640 (+178.26%)
Mutual labels:  location, geolocation
React Native Baidumap Sdk
React Native BaiduMap SDK for Android + iOS
Stars: ✭ 309 (+34.35%)
Mutual labels:  location, geolocation
Coregpx
A library for parsing and creation of GPX location files. Purely Swift.
Stars: ✭ 132 (-42.61%)
Mutual labels:  location, geolocation
Googleapi
C# .NET Core Google Api (Maps, Places, Roads, Search, Translate). Supports all endpoints and requests / responses.
Stars: ✭ 346 (+50.43%)
Mutual labels:  location, geolocation
React Native Geolocation Service
React native geolocation service for iOS and android
Stars: ✭ 934 (+306.09%)
Mutual labels:  location, geolocation
discourse-locations
Tools for handling locations in Discourse
Stars: ✭ 31 (-86.52%)
Mutual labels:  location, geolocation
Window Size
React hook for subscribing to window size
Stars: ✭ 130 (-43.48%)
Mutual labels:  hooks, browser
Geo Location
Web component element for the Geolocation API
Stars: ✭ 86 (-62.61%)
Mutual labels:  location, geolocation
React Native Amap Geolocation
React Native geolocation module for Android + iOS
Stars: ✭ 289 (+25.65%)
Mutual labels:  location, geolocation
React Native Android Location Services Dialog Box
React Native Android Location Services Dialog Box
Stars: ✭ 175 (-23.91%)
Mutual labels:  location, geolocation
kirby-locator
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.
Stars: ✭ 83 (-63.91%)
Mutual labels:  location, geolocation
React Uploady
Modern file uploading - components & hooks for React
Stars: ✭ 372 (+61.74%)
Mutual labels:  hooks, browser
simple-location
Adds Basic Location Support to Wordpress
Stars: ✭ 26 (-88.7%)
Mutual labels:  location, geolocation
Flutter Geolocator
Android and iOS Geolocation plugin for Flutter
Stars: ✭ 759 (+230%)
Mutual labels:  location, geolocation
pikaz-location
定位插件(限中国)
Stars: ✭ 78 (-66.09%)
Mutual labels:  location, geolocation
orange3-geo
🍊 🌍 Orange add-on for dealing with geography and geo-location
Stars: ✭ 22 (-90.43%)
Mutual labels:  location, geolocation
P5.geolocation
a geolocation and geofencing library for p5.js
Stars: ✭ 75 (-67.39%)
Mutual labels:  location, geolocation
Track Ip
Advanced Ip Tracker Tool
Stars: ✭ 150 (-34.78%)
Mutual labels:  location, geolocation

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)
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].