Skip to content

Instantly share code, notes, and snippets.

@MoOx
Last active April 30, 2023 19:28
Show Gist options
  • Save MoOx/12726d85a3343d84ee3c to your computer and use it in GitHub Desktop.
Save MoOx/12726d85a3343d84ee3c to your computer and use it in GitHub Desktop.
Double touch tap workaround for React based on onTouchTap (react-tap-event-plugin)
const dblTouchTapMaxDelay = 300
let latestTouchTap = {
time: 0,
target: null,
}
export default function isDblTouchTap(event) {
const touchTap = {
time: new Date().getTime(),
target: event.currentTarget,
}
const isFastDblTouchTap = (
touchTap.target === latestTouchTap.target &&
touchTap.time - latestTouchTap.time < dblTouchTapMaxDelay
)
latestTouchTap = touchTap
return isFastDblTouchTap
}
// add onTouchTap support to avoid 300ms onClick delay on touchscreen (like iOS)
import injectTapEventPlugin from "react-tap-event-plugin"
injectTapEventPlugin()
import isDblTouchTap from "./isDblTouchTap"
// ...
<div
onTouchTap={ (e) => {
if (isDblTouchTap(e)) {
// == onDblTouchTap
}
} }
>
...
</div>
@heymartinadams
Copy link

Awesome, thanks! 👍

@ShivamJoker
Copy link

On click seems to be working fine with react

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment