Directional Swipe Sensitivity Configuration

Build a React component that demonstrates asymmetric swipe sensitivity across different directions to create a more intuitive user interface for a mobile game menu.

Requirements

Create a swipeable menu panel component where:

• Horizontal swipes (left/right) should be more sensitive (easier to trigger) for quick menu navigation
• Vertical swipes (up/down) should be less sensitive (harder to trigger) to avoid accidental menu changes while scrolling
• The component should display the swipe direction when a swipe is detected
• Use different minimum distance thresholds for each direction

Specifically:

• Left swipes should require at least 15 pixels of movement
• Right swipes should require at least 15 pixels of movement
• Up swipes should require at least 50 pixels of movement
• Down swipes should require at least 50 pixels of movement

Test Cases

• Swiping left with 20 pixels of horizontal movement triggers a left swipe detection @test
• Swiping down with 30 pixels of vertical movement does not trigger a swipe (below threshold) @test
• Swiping up with 60 pixels of vertical movement triggers an up swipe detection @test

Implementation

@generates

API

/**
 * A swipeable menu component with direction-specific sensitivity thresholds.
 *
 * @returns {JSX.Element} A React component that detects swipes with different thresholds per direction
 */
function SwipeMenu() {
  // IMPLEMENTATION HERE
}

export default SwipeMenu;

Dependencies { .dependencies }

react-swipeable { .dependency }

Provides swipe gesture detection with configurable sensitivity per direction.