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 evaluation assesses how effectively the engineer uses the react-swipeable package to implement swipe gesture detection in all four directions (left, right, up, down) for the image gallery component.",
"type": "weighted_checklist",
"checklist": [
{
"name": "useSwipeable Hook Usage",
"description": "The implementation imports and uses the useSwipeable hook from react-swipeable package to set up swipe detection.",
"max_score": 15
},
{
"name": "Left Swipe Handler",
"description": "The implementation uses onSwipedLeft callback to detect left swipe gestures and advances to the next image when triggered.",
"max_score": 20
},
{
"name": "Right Swipe Handler",
"description": "The implementation uses onSwipedRight callback to detect right swipe gestures and navigates to the previous image when triggered.",
"max_score": 20
},
{
"name": "Up Swipe Handler",
"description": "The implementation uses onSwipedUp callback to detect upward swipe gestures and marks the current image as favorite when triggered.",
"max_score": 20
},
{
"name": "Down Swipe Handler",
"description": "The implementation uses onSwipedDown callback to detect downward swipe gestures and removes the image from favorites when triggered.",
"max_score": 20
},
{
"name": "Handler Attachment",
"description": "The implementation correctly attaches the handlers returned by useSwipeable to the DOM element using spread operator or ref assignment (e.g., {...handlers} or ref={handlers.ref}).",
"max_score": 5
}
]
}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