{"library":"react-swipeable","title":"React Swipe Event Handler Hook","description":"React Swipeable is a lightweight React hook, `useSwipeable`, designed to easily add swipe and touch event handling capabilities to any React component. It abstracts away the complexities of touch events, providing a consistent API for detecting various swipe directions (up, down, left, right), tap events, and customizable thresholds for swipe detection via the `delta` prop. The library is currently at version 7.0.2 and is actively maintained by FormidableLabs, with regular updates to support new React versions (e.g., React 19) and introduce new features like `swipeDuration` and `onSwipeStart`. Its key differentiators include its hook-based API, fine-grained control over touch event options, and a focus on performance by leveraging passive event listeners by default, addressing Lighthouse performance issues related to touch events.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-swipeable"],"cli":null},"imports":["import { useSwipeable } from 'react-swipeable';","import { type SwipeEventData } from 'react-swipeable';","import { type SwipeableProps } from 'react-swipeable';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { useSwipeable, SwipeEventData } from 'react-swipeable';\n\nconst SwipeableBox = () => {\n  const [swipeDirection, setSwipeDirection] = useState('none');\n  const [swipeCount, setSwipeCount] = useState(0);\n\n  const handlers = useSwipeable({\n    onSwiped: (eventData) => {\n      console.log('User Swiped!', eventData);\n      setSwipeDirection(eventData.dir);\n      setSwipeCount(prev => prev + 1);\n    },\n    onSwipedLeft: () => console.log('Swiped Left!'),\n    onSwipedRight: () => console.log('Swiped Right!'),\n    onSwipedUp: () => console.log('Swiped Up!'),\n    onSwipedDown: () => console.log('Swiped Down!'),\n    onTap: () => console.log('Tapped!'),\n    onSwipeStart: (eventData) => console.log('Swipe started!', eventData.initial[0]),\n    onSwiping: (eventData: SwipeEventData) => {\n      // console.log('Swiping...', eventData.deltaX, eventData.deltaY);\n    },\n    preventScrollOnSwipe: true,\n    trackTouch: true,\n    trackMouse: true,\n    delta: 10, // min distance(px) before a swipe starts\n    swipeDuration: 500 // max duration(ms) for a swipe\n  });\n\n  return (\n    <div\n      {...handlers}\n      style={{\n        touchAction: 'none',\n        width: '300px',\n        height: '200px',\n        backgroundColor: '#f0f0f0',\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        alignItems: 'center',\n        border: '2px dashed gray',\n        fontSize: '1.2em',\n        userSelect: 'none'\n      }}\n    >\n      <p>Swipe or Tap Me!</p>\n      <p>Last Swipe: {swipeDirection}</p>\n      <p>Total Swipes: {swipeCount}</p>\n    </div>\n  );\n};\n\nexport default SwipeableBox;\n","lang":"typescript","description":"This example demonstrates how to use `useSwipeable` to detect swipe directions and taps, updating the UI accordingly. It includes common configuration options like `preventScrollOnSwipe`, `delta`, and `swipeDuration`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}