pmndrs / use-gesture

👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
https://use-gesture.netlify.app
MIT License
9.06k stars 309 forks source link

Add tap, long tap and double tap gesture #241

Open jrmi opened 3 years ago

jrmi commented 3 years ago

Although this 3 gestures can already be done with current existing one, proper hooks can ease the job and have consistent implementation.

Information:

dbismut commented 3 years ago

Once 8.1.0 is released I can consider a pull request to implement this.

Raaghu commented 3 years ago

+1

dbismut commented 3 years ago

Note that onDblClick and onClick handlers exist in React + this lib has a tap state attribute and a delay config option.

All in all I guess this makes detection of any of these gestures trivial IMO.

tim-soft commented 3 years ago

I created a useDoubleClick hook for a project for this very reason, since onDblClick will still fire your onClick handler. Really simple code https://github.com/tim-soft/use-double-click

serewaste commented 3 years ago

+1 Would love a double tap as well!

dbismut commented 3 years ago

I don't think I'll handle this myself. If someone wants to give it a shot please open a PR.

mindyourlifeguide commented 3 years ago

+1 Would love a double tap as well!

StringKe commented 3 years ago

Is there any way to temporarily implement this function? I am worried that other click/double click components will conflict with @use-gesture.

laclance commented 3 years ago

yeah I have that problem, added my own long press handler but now useDrag 's down variable is getting stuck on true, so dragging happens after long press even without clicking again

dbismut commented 3 years ago

@laclance would you mind elaborating a bit more and possibly submit a sandbox?

laclance commented 3 years ago

So the problem is if you press or hold after swiping then a swipe will always get triggered at the same time. This was not the case until I upgraded from react-use-gesture.

https://codesandbox.io/s/laughing-einstein-23kd2

dbismut commented 3 years ago

@laclance thanks for the sandbox. Can you describe what you're trying to achieve feature-wise? The code seems a bit complex at first glance.

laclance commented 3 years ago

sorry I tried to remove as much code as I could, so basically our app has many objects that have different functionality when pressed, held or swiped (e.g select, edit, delete, respectively, with animations) and also switch screens by swiping when on mobile.

laclance commented 3 years ago

it's been a while since I created the hooks but I believe most of the complexity came about when trying to get the events working on multiple objects, for example when the container and child components all need press, hold and swipe events.

dbismut commented 3 years ago

@laclance Have a look at this https://codesandbox.io/s/great-tu-kzc8m?file=/src/App.tsx

laclance commented 3 years ago

thank you, I ended up just implemented everything myself, wasn't to difficult but that might be helpful if I need more animations.

mrsaleh commented 4 months ago

It's still open ? after 4 years , we really need tap and double tap