Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import * as React from "react"
import { Frame } from "framer"
// change your presets here
const doubleTapMiliseconds = 300
const longTapMiliseconds = 400
export function TapRecognizer() {
const [tapTimestamp, setTapTimestamp] = React.useState(Date.now())
function onTapStart(event, info) {
const delay = Date.now() - tapTimestamp
if (delay < doubleTapMiliseconds) {
onDoubleTap(event, info)
}
setTapTimestamp(Date.now())
}
// this one is triggered on tap end
function onTap(event, info) {
const duration = Date.now() - tapTimestamp
if (duration > longTapMiliseconds) {
onLongTap(event, info)
}
}
function onLongTap(event, info) {
console.log("long tap")
}
function onDoubleTap(event, info) {
console.log("double tap")
}
return (
<Frame
size={150}
radius={30}
background={"#fff"}
center={true}
onTapStart={onTapStart}
onTap={onTap}
/>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.