trekhleb / use-position

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

Hi there!

I'm Oleksii. I work as a full-time software engineer at Uber. In my spare time, I do open-sourcing.

Most of my open-source 🚀 projects below 👇🏻 are focused on one thing - to help people learn 📚. You may use these projects to learn about algorithms in JavaScript and get prepared for technical interviews, or to learn Python syntax and start experimenting with machine learning algorithms and the math behind them, etc.

There are also other projects that I've developed for fun but that you might find useful, like ✍🏻 okso.app online drawing app.

I also write 📝 articles about life, web development and machine learning.

Getting in touch

trekhleb.dev

   

use-position's Issues

useEffect executes many times during render when using options

when using the second parameter, the useEffect gets called many times, leading to multiple calls to onChange, and multiple location changes, even if they aren't happening. either put on the readme that you need to pass an useMemo'ed options object or useMemo inside the hook

usePosition() not working in desktop safari version 13.1.1

Hi, I'm trying to use your library in safari and it's not working.
MacOs = Catalina Version 10.15.5

Both latitude and longitude returns undefined. Even error returns undefined

const { latitude, longitude, timestamp, accuracy, errorMessage } = usePosition(false, {
    enableHighAccuracy: true,
    timeout: 60000,
    maximumAge: 0,
  })


 console.log('latitude', latitude)
    console.log('longitude', longitude)
    console.log('errorMessage', errorMessage)

Can we get a location if app is killed or web is not running?

I am creating a pwa so can i get location if pwa app is killed or not and Whenever the location will get change will it work?

location is not accurate

the position is not accurate

usePosition not returning bearing

The navigator geolocation API can return the bearing of the device from north. Why isn't it implemented in usePosition hook?

Create @types/use-position npm package to use the library also with Typescript

I came across this simple but usefult module and I wanted to use it in my react project using Typescript. Unfortunately I cannot use it without any typescript types definition. Usually, for each nmp package there's a twin @types/module-name npm package which contains the module Typescript definition.

I made this module for you and just submitted a pull request on the main repository waiting for merging in the master branch and to be published in the NPM repository. You can follow pull request progress here: DefinitelyTyped PR #41049

I hope this will help your library to be user in many other Typescript projects!

I will close the Issue as soon as the final npm package is published.

Is speed available too?

First of all, thank you for this easy to use hook.

I see in the source code that we don't get speed from this hook. I need it when the position is under watch.
I can contribute and add it if it is not tried earlier and submit a PR for this.

Callback function to run when the user location is changed?

Hi, I want to send data of the location change to the server-side using node js and socket.io but I can not seem to find a way to do this with this package.

Can you please let me know how I can detect the location change in your package?

Latitude and longitude does not get updated after geolocation change

Hi, I want to update latitude and longitude as browser detects geolocation change.
So I just followed what document says, but it doesn't seem to work.
It always returns the same latitude and longitude about where I called usePosition() for the very first time.
I can't figure out what the problem is.
Below is my code:

  const watch = true;
  const [currPosition, setCurrPosition] = useState({
    lat: 0,
    long: 0,
  })
  const { latitude, longitude, timestamp, accuracy, error } = usePosition(
    watch,
    { enableHighAccuracy: true }
  );
 useEffect(() => {
    setCurrPosition({lat: latitude, long: longitude})
  }, [latitude, longitude]);

We should add 1 more parameter "askForLocationPermission:true" by default

By default current implementation asks for Geo permission if it doesn't exist.
Ideally, we should be able to give 1 more parameter to change weather this should ask for location permission or not.

Somethign like this
const currentLocation = usePosition({askLocationPermission:false});

This will make sure that if permission is not asked, then it should not bother anything and return an error or msg.

can't install with react 18.2.0

$ npm i use-position --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from [email protected]
npm ERR! node_modules/use-position
npm ERR! use-position@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

system: ubuntu 22

Trigger usePosition() onClick

I'm facing a few issues when I try to trigger geolocation prompt in browser on click event. By default, in the Demo, seems that as soon as usePosition() triggers the browser ask for geolocation permissions, but when I am not able to trigger it when an element is clicked, seems there are some issues related with hooks.

I've tried something like this but without success:

 const IndexPage = () => {
            const [geolocation, setGeolocation] = useState({});
            const [isGeolocationActive, triggerGeolocation] = useState(false);
            let currentPosition = usePosition();
            
            function handleGeolocation() {
                if (isGeolocationActive) {
                    setGeolocation(currentPosition)
                    console.log('geolocation', geolocation)
                } else triggerGeolocation(true);
            }
    
            return (
                <Layout>
                    <Wrapper type={`list`} classNames={`wrapper pet__cards cards__list`}>
                        <Card>
                            <Image/>
                            <div onClick={() => handleGeolocation()}>Click me to share my location</div>

Permissions prompt still ask for geolocation permissions as soon as I land on the page.

I've also tried to put the usePosition hook in another component and call it onClick event. However, in this case, I face some hooks rules error such as:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons...

Continually getting undefined for long and lat values

I am using this in reactJS and I am just trying to get the value to log but it keeps returnng undefined despite the fact I am using the variable and I believe it is set up correctly. Anyone else experiencing something similiar?

[Violation] Only request geolocation information in response to a user gesture

I'm seeing an this Violation increasing continuously on the page [Violation] Only request geolocation information in response to a user gesture.

This is my usage of usePosition

const {
    latitude: userLatitude,
    longitude: userLongitude,
    error: geoLocationError,
  } = usePosition(true, {
    enableHighAccuracy: CONSTANTS.locationServices.enableHighAccuracy, // true
    timeout: CONSTANTS.locationServices.timeout, // 60000
  });

This seems to only be happening in Chrome. Safari and Firefox aren't reporting the same violation. I did notice in Firefox though that if I didn't check the box to remember me allowing location services the box repeatedly popped up to ask me to allow. Is this related?

Not working while deploying

First, thank you for the lovely os package :)

Second, while deploying to GitHub Pages, usePosition just not working (everything as expected while developing)