Skip to content

feat(tap): add tap gesture with single/double tap and long press discrimination#702

Open
panudetjt wants to merge 6 commits intopmndrs:mainfrom
panudetjt:feat/use-tap-click-gesture
Open

feat(tap): add tap gesture with single/double tap and long press discrimination#702
panudetjt wants to merge 6 commits intopmndrs:mainfrom
panudetjt:feat/use-tap-click-gesture

Conversation

@panudetjt
Copy link
Copy Markdown

@panudetjt panudetjt commented Mar 27, 2026

Summary

  • Add new tap gesture engine (TapEngine) with discrimination between single taps, double taps, and long presses
  • Export useTap hook in @use-gesture/react package
  • Add tapConfigResolver with configurable options for tap behavior
  • Include comprehensive test suite for tap gesture functionality
  • Add interactive demo sandbox for tap gesture testing

Tap Gesture Features

State Description
singleTap Confirmed after tapTimeout with no second tap
doubleTap Two taps within tapTimeout window
longPress Pointer held for longPressTimeout ms
tapCount Number of taps detected (1 or 2)

Configuration Options

Option Default Description
tapDiscrimination true Enable single/double tap discrimination
tapTimeout 180ms Max time between taps for double tap
longPressTimeout 0 Time to trigger long press (0 = disabled)
moveThreshold 10px Max movement before tap is canceled

Usage

import { useTap } from '@use-gesture/react'

const bind = useTap(({ singleTap, doubleTap, longPress, tapCount }) => {
  if (singleTap) console.log('single tap')
  if (doubleTap) console.log('double tap')
  if (longPress) console.log('long press')
})

return <div {...bind()} />

close #241

panudetjt and others added 4 commits March 25, 2026 21:17
Add comprehensive tap gesture recognizer with support for single tap,
double tap discrimination, and long press detection. The implementation
includes a new TapEngine, configuration resolver, React hook, and
TypeScript types.

Key features:
- Single/double tap discrimination with configurable timeout
- Long press detection with configurable threshold
- Movement threshold cancellation
- Pointer button filtering
- Mouse-only option
- Full test coverage
Add a new interactive demo for the tap gesture showcasing single tap,
double tap, and long press detection. Includes Leva controls for
adjusting timing thresholds and visual feedback with spring animations.
Define DEFAULT_TAP_TIMEOUT, DEFAULT_LONG_PRESS_TIMEOUT, and
DEFAULT_TAP_MOVE_THRESHOLD constants to replace hardcoded default
values in the tap config resolver. This improves maintainability by
centralizing default configuration values and making them easier to
modify and reference.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Mar 27, 2026

🦋 Changeset detected

Latest commit: 5c6b632

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@use-gesture/core Minor
@use-gesture/react Minor
@use-gesture/vanilla Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci Bot commented Mar 27, 2026

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b752445:

Sandbox Source
gesture-drag Configuration
gesture-drag-target Configuration
gesture-nested Configuration
gesture-drag-vanilla Configuration
gesture-move Configuration
gesture-pinch Configuration
gesture-multiple-pinch Configuration
gesture-three Configuration
gesture-tap Configuration
gesture-card-zoom Configuration
gesture-viewpager Configuration

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add tap, long tap and double tap gesture

1 participant