Unable to get ralative coordinates of an element.

[herbievine]

Describe the bug
I was trying to recreate the card effect as displayed here, but noticed, that if you want the element to actually be used in a website, you don't have access to its x and y position (I created an example of what I mean here). I found a workaround using the onMouseLeave and onMouseMove events, but would be nice if you could integrate it into the useMove function.

Sandbox or Video
My take on it

Information:

• React Use Gesture version: latest

[dbismut]

You're not using the latest version of use-gesture.

[herbievine]

Well, could you show me how to do it then? I've tried for hours and asked on SO... Thanks

[dbismut]

Well this is a question, not an issue.

The lib doesn’t provide the position of an element. What do you want to do exactly? What are relative coordinates?

Also I won’t help on v9.

[herbievine]

Well in your example, you have the position of the element due to the fact that it starts in the center of the screen, and the drag values relative to that start are measured. Unlike the example, what if you were to have an element which gets created in a random part of the screen (i.e. you don't have access to the position in the screen or the dimensions of the element). That's what I'm trying to get around.

If you have a look at each sandbox I posted, you'll get the idea.

[dbismut]

If you need the position of an element just use getBoundingClientRect(). This has nothing to do with this lib.

[herbievine]

Ok we're getting somewhere 😃. Could you help me with type safety? I throws an error when I call the function on target. This is what I've done so far:

const bind = useMove<PointerEvent<HTMLElement> & { target: HTMLElement }>(
  ({ target }) => {
    // working but not with typescript
    console.log(target.getBoundingClientRect());
  },
  api
);