CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-swipeable

React hook for handling swipe gestures on touch devices and mouse interactions with comprehensive directional callbacks and customizable sensitivity settings

90

1.00x

Evaluation90%

1.00x

Agent success when using this tile

Overview
Eval results
Files

rubric.jsonevals/scenario-2/

{
  "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-swipeable

tile.json