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-3/

{
  "context": "This criteria evaluates how well the engineer uses react-swipeable's rotation angle support to handle swipe gestures on a rotated UI element. The focus is on correctly configuring the rotationAngle option and implementing the appropriate directional callbacks to interpret swipes relative to the rotated coordinate system.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "useSwipeable hook usage",
      "description": "The solution imports and uses the useSwipeable hook from react-swipeable package",
      "max_score": 15
    },
    {
      "name": "rotationAngle configuration",
      "description": "The useSwipeable hook is configured with the rotationAngle option set to 45 degrees to match the CSS transform rotation",
      "max_score": 35
    },
    {
      "name": "Directional callbacks",
      "description": "The solution implements directional swipe callbacks (onSwipedLeft, onSwipedRight, onSwipedUp, onSwipedDown) or a general onSwiped callback to detect swipe directions",
      "max_score": 20
    },
    {
      "name": "Handler attachment",
      "description": "The handlers returned by useSwipeable are correctly spread onto the swipeable panel element using the spread operator ({...handlers})",
      "max_score": 15
    },
    {
      "name": "trackMouse configuration",
      "description": "The useSwipeable hook is configured with trackMouse set to true to enable mouse swipe support as specified in the requirements",
      "max_score": 15
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-react-swipeable

tile.json