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 swipeDuration configuration to distinguish between quick swipes and slow dragging motions. The focus is on proper use of the useSwipeable hook with time-based gesture filtering.",
"type": "weighted_checklist",
"checklist": [
{
"name": "useSwipeable hook usage",
"description": "The solution imports and uses the useSwipeable hook from react-swipeable to handle swipe gestures",
"max_score": 15
},
{
"name": "swipeDuration configuration",
"description": "The solution configures the swipeDuration option to 500 milliseconds to filter out slow dragging motions",
"max_score": 30
},
{
"name": "Directional callbacks",
"description": "The solution uses directional swipe callbacks (onSwipedLeft, onSwipedRight, onSwipedUp, onSwipedDown) or the general onSwiped callback to detect swipe direction",
"max_score": 20
},
{
"name": "Event data usage",
"description": "The solution accesses the SwipeEventData to extract timing information (such as calculating duration from velocity and displacement or tracking timestamps)",
"max_score": 15
},
{
"name": "trackMouse configuration",
"description": "The solution enables trackMouse option to support both touch and mouse inputs as specified in the requirements",
"max_score": 10
},
{
"name": "Handler spreading",
"description": "The solution properly spreads the handlers object returned by useSwipeable onto the swipeable DOM element",
"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