React hook for handling swipe gestures on touch devices and mouse interactions with comprehensive directional callbacks and customizable sensitivity settings
90
Evaluation — 90%
↑ 1.00xAgent success when using this tile
{
"context": "This criteria evaluates how well the engineer uses react-swipeable's direction-specific delta threshold configuration to implement asymmetric swipe sensitivity. The focus is on proper usage of the delta parameter as an object with directional keys.",
"type": "weighted_checklist",
"checklist": [
{
"name": "useSwipeable hook usage",
"description": "Uses the useSwipeable hook from react-swipeable to enable swipe detection",
"max_score": 15
},
{
"name": "Delta object configuration",
"description": "Configures the delta parameter as an object with direction-specific keys (left, right, up, down) rather than a single number",
"max_score": 30
},
{
"name": "Correct threshold values",
"description": "Sets correct threshold values: left=15, right=15, up=50, down=50 (or values that match the specified requirements)",
"max_score": 25
},
{
"name": "Direction callbacks",
"description": "Implements appropriate swipe direction callbacks (e.g., onSwipedLeft, onSwipedRight, onSwipedUp, onSwipedDown or onSwiped) to detect and respond to swipe gestures",
"max_score": 20
},
{
"name": "Handler attachment",
"description": "Properly attaches the handlers returned from useSwipeable to a DOM element using spread operator or ref",
"max_score": 10
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-react-swipeabledocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10