Double tap & long press event overrides for Framer X

TapEventOverrides.tsx

import { Data, Override } from "framer"

const state = Data({
    doubleTapIndex: 0,
    doubleTapTimer: setTimeout(null, null),
    longPress: false,
    longPressTimer: setTimeout(null, null),
})

export function doubleTap(): Override {
    return {
        whileTap: {
            scale: 0.95,
        },
        onTap() {
            if (state.doubleTapIndex === 1) {
                clearTimeout(state.doubleTapIndex)
                console.log("Double Tap")
            } else if (state.doubleTapIndex <= 1) {
                state.doubleTapIndex = state.doubleTapIndex + 1

                // Start a timer to cancel the double tap after 1s
                state.doubleTapTimer = setTimeout(() => {
                    state.doubleTapIndex = 0
                    state.doubleTapTimer = null
                }, 1000)
            }
        },
    }
}

export function longPress(): Override {
    return {
        whileTap: {
            scale: 0.95,
        },
        onTapStart() {
            // Start a timer to trigger the long press after 1s
            state.longPressTimer = setTimeout(() => {
                state.longPress = true
                console.log("Long Press")
            }, 1000)
        },
        onTap() {
            if (state.longPress === true) {
                console.log("Long Press End")
            } else {
                clearTimeout(state.longPressTimer)
            }

            // Reset the long press state
            state.longPress = false
        },
    }
}

You could also do this in a code component using React.useState hook, but here's an example for design components + overrides.