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
Quality

Pending

Does it follow best practices?

Impact

90%

1.00x

Average score across 10 eval scenarios

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

criteria.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
    }
  ]
}

tile.json