Any support event onDoubleTap?

[nakamuraos]

I want handle event onDoubleTap. Is this easy implement?

Or can you help me provide an example which detect a double tap?

Thank you very much, an awesome project.

[hartzis]

@nakamuraos Thanks for the issue and question. 🤔

After some initial investigation there does appear to be a couple of useful small libraries that are probably better suited for this situation.

https://www.npmjs.com/package/use-double-click https://www.npmjs.com/package/use-double-tap

📝 I looked at both source codes and use-double-click uses a ref and may not work well with react-swipeable if you intend to, but use-double-tap uses onClick under the hood and would not interfere with react-swipeable.

Let me know what you end up going with, cheers

[nakamuraos]

Hi @hartzis Thanks for your response, very helpful.

As you mentioned, I tried both them. Both resolved my issue.

Will very interesting if you can implement this because we have already onTap and mixed onDoubleTap with other hooks can raise issues unexpected.

[hartzis]

@nakamuraos At this time i don't want to increasing react-swipeable's bundle size in order to accomidate a "double tap" feature.

But i think we can utilize the code from use-double-tap in conjunction with react-swipeable's onTap well.

Let me know what you think

const timer = useRef(null);

const handler = useCallback(
    (event) => {
        if (!timer.current) {
            timer.current = setTimeout(() => {
                timer.current = null;
            }, 300);  // the double click/tap threshold
        } else {
            clearTimeout(timer.current);
            timer.current = null;
            console.log('Double click/tap');
            // Do your custom double click/tap stuff here
        }
    },
    []
);

const handlers = useSwipeable({
  onTap: handler,
  ...config,
});
return <div {...handlers}> You can swipe here </div>;

I tested this with the examples and it works great 👍 .