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

{
  "context": "This criteria evaluates how effectively the engineer uses the react-swipeable package to implement an image gallery with scroll prevention. The focus is on proper usage of the useSwipeable hook and its configuration options, particularly the preventScrollOnSwipe feature.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "useSwipeable hook usage",
      "description": "The solution imports and correctly invokes the useSwipeable hook from react-swipeable, passing a configuration object and spreading the returned handlers onto the gallery element.",
      "max_score": 20
    },
    {
      "name": "preventScrollOnSwipe enabled",
      "description": "The configuration object passed to useSwipeable includes preventScrollOnSwipe set to true, which is essential for preventing browser scroll during swipes.",
      "max_score": 25
    },
    {
      "name": "onSwipedLeft callback",
      "description": "The configuration includes an onSwipedLeft callback function that advances to the next image when a left swipe is detected.",
      "max_score": 15
    },
    {
      "name": "onSwipedRight callback",
      "description": "The configuration includes an onSwipedRight callback function that returns to the previous image when a right swipe is detected.",
      "max_score": 15
    },
    {
      "name": "trackMouse enabled",
      "description": "The configuration includes trackMouse set to true to enable mouse drag events in addition to touch events, making the gallery usable on desktop.",
      "max_score": 15
    },
    {
      "name": "Handler spreading",
      "description": "The handlers object returned by useSwipeable is correctly spread onto a DOM element (e.g., using {...handlers}) to attach the swipe event listeners.",
      "max_score": 10
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-react-swipeable

tile.json