Add tap, long tap and double tap gesture

[jrmi]

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

Information:

• React Use Gesture version: [v8.1.0-beta.6]

[dbismut]

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

[Raaghu]

+1

[dbismut]

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]

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]

+1 Would love a double tap as well!

[dbismut]

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

[mindyourlifeguide]

+1 Would love a double tap as well!

[StringKe]

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

[laclance]

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]

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

[laclance]

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]

@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]

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]

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]

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

[laclance]

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