Swipe Gesture Counter

A React component that tracks and displays directional swipe gestures.

Capabilities

Tracks Left Swipes

• When the user swipes left on the swipeable area, the left swipe counter increments by 1 @test

Tracks Right Swipes

• When the user swipes right on the swipeable area, the right swipe counter increments by 1 @test

Tracks Up Swipes

• When the user swipes up on the swipeable area, the up swipe counter increments by 1 @test

Tracks Down Swipes

• When the user swipes down on the swipeable area, the down swipe counter increments by 1 @test

Tracks Total Swipes

• When the user swipes in any direction, the total swipe counter increments by 1 @test
• The total counter should work for left, right, up, and down swipes @test

Implementation

@generates

API

import React from 'react';

/**
 * A component that tracks and displays swipe gestures in all four directions.
 *
 * Displays:
 * - Left swipes count
 * - Right swipes count
 * - Up swipes count
 * - Down swipes count
 * - Total swipes count
 */
export default function SwipeCounter(): React.ReactElement;

User Interface

The component should render:

• A swipeable area (at least 300px by 300px) with a clear visual boundary
• Display text showing "Swipe here!" or similar instruction
• Five separate counters displayed with labels:
  • "Left: X"
  • "Right: X"
  • "Up: X"
  • "Down: X"
  • "Total: X"

Dependencies { .dependencies }

react-swipeable { .dependency }

Provides swipe gesture detection with directional callbacks.

@satisfied-by

React { .dependency }

React library for building user interfaces.

@satisfied-by