Getting Cursor Position Relative to Element in React?


I was wondering what the best way was to get the cursor position relative to an element in react. Unfortunately I can’t get jQuery to play nice with react.

mouse cursor or text cursor?

cursor. I’m building a where’s waldo game

So you’re trying to figure out where the user moved their mouse cursor to find “waldo”?

Yes and on click check against coordinates.

What you could probably do is find the component element position on the screen using .getBoundingClientRect() to find the coordinates according to which axis and then get the mouse coordinate using the methods from MouseEvent which would be .screenX and .screenY

It would just be a matter of finding the difference between each of the coordinates. I hope this helps :slight_smile:

Yes, It does help a little bit. I’m still unsure of how I’d impliment this. The documentation for .getBoundingClientRect() is confusing.