xxxxxxxxxx
const [nrTaps, setNrTaps] = useState<number>(0);
const [startDate, setStartDate] = useState<number>(Date.now());
const touchStart = () => {
if (nrTaps >= 1 && Date.now() - startDate < 500) {
setStartDate(Date.now());
setNrTaps(0);
// double tap
} else {
setStartDate(Date.now());
setNrTaps(prevNr => prevNr + 1);
// single tap;
}
};
xxxxxxxxxx
import { useState, useEffect } from 'react';
function useSingleAndDoubleClick(actionSimpleClick, actionDoubleClick, delay = 250) {
const [click, setClick] = useState(0);
useEffect(() => {
const timer = setTimeout(() => {
// simple click
if (click === 1) actionSimpleClick();
setClick(0);
}, delay);
// the duration between this click and the previous one
// is less than the value of delay = double-click
if (click === 2) actionDoubleClick();
return () => clearTimeout(timer);
}, [click]);
return () => setClick(prev => prev + 1);
}
const click = useSingleAndDoubleClick(callbackClick, callbackDoubleClick);
<button onClick={click}>clic</button>