useMeasure hook shows wrong X value?

Floriferous commented 3 years ago

What is the current behavior?

I'm not sure if I understand the useMeasure correctly, but the goal is for it to return the boundingClientRect of the element right?

If that is the case, then the x value, and probably others, seem to be wrong, as it's always 0 on my end.

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below: Here's a very simple reproduction: https://codesandbox.io/s/broken-browser-lh313?file=/src/App.js

I compared it with the DOM API on the same node so you can see what I expect.

What is the expected behavior? I expect the result of useMeasure left and X to match the ones from the DOM.

A little about versions:

React: latest
react-use: latest
Did this worked in the previous package version? don't know

birkanozer commented 3 years ago

I have the same issue too.

macrozone commented 3 years ago

i thought this worked properly, but it seems broken in the current version

fcisio commented 3 years ago

For me width & height are inverted.

Did you guys find the last stable version for useMeasure?

tomasdisk commented 3 years ago

I have the same problem, top and left are always 0

Forked the codesandbox above and copy useMeasure to inspect the error: https://codesandbox.io/s/little-dream-fbtp6?file=/src/useMeasure.js:609-655 the contectRect has difetent info than target.getBoundingClientRect in the observed target

fcisio commented 3 years ago

Hey @tomasdisk You can take a look at react-hookz, a bunch of guys from here has created it since react-use seems to be dead at this point.

They have a useMesure hook.

tomasdisk commented 3 years ago

@fcisio Thanks for the info! I'll check it 😄