search

ethanselzer / react-cursor-position

A React component that decorates its children with mouse and touch coordinates relative to itself.
https://ethanselzer.github.io/react-cursor-position
MIT License
143 stars 35 forks source link

feature request: click event #18

Closed jwkvam closed 6 years ago

jwkvam commented 6 years ago

Hello, very slick looking library! I was looking for a react component that gave coordinates from images and found this one.

I am looking for a component that has a click event. Use cases I have in mind include:

  1. Double magnify an image: for example, click a point in an image, it opens a partially zoomed second image where you can hover to show a fully zoomed in third image.
  2. I have an expensive callback that would get called too frequently with hover events. I could debounce it but I want the user to have better control over when it gets called.
  3. Hand labeling data: for a machine learning task and I have some unlabeled data and I want to use this to help label parts of the image.

Does this feature interest you? Thanks!

ethanselzer commented 6 years ago

@jwkvam - Thanks for opening this issue! I appreciate you including a description of your use case. It sounds like you are working on some very cool stuff! If I understand correctly you would like to capture the precise position a user clicks on an image, relative to the image boundaries. Does that sound right?

jwkvam commented 6 years ago

@ethanselzer Yes! That's exactly what I'm looking for. Any value I can use to estimate where the user clicked on the image.

ethanselzer commented 6 years ago

Hi @jwkvam - Thanks for the information. The primary focus of react-cursor-position is to notify child components with the position of the cursor over time. I think it is less suited to capturing the position of the cursor at a single moment in time. I wonder if your use case would be better served by a custom click handler like this example on CodePen. Please let me know your thoughts. Thanks!

jwkvam commented 6 years ago

That's pretty cool! That's covers exactly what I want. I'm not much of a JS developer myself so I usually just try to find react components and treat them like lego pieces :) I'll take that snippet and try to run with it. Thanks for your help.