react-swipeable

React-swipeable is a lightweight, customizable React component for adding swipe gestures to your applications. It provides an easy way to detect and handle swipe events on touch devices and desktops, allowing developers to create interactive and responsive user interfaces.

Pros

• Simple and intuitive API for implementing swipe gestures
• Supports both touch and mouse events for cross-device compatibility
• Highly customizable with various configuration options
• Lightweight and has minimal dependencies

Cons

• Limited to React applications only
• May require additional styling and positioning to work seamlessly with existing components
• Documentation could be more comprehensive, especially for advanced use cases

Code Examples

Basic usage:

import { useSwipeable } from 'react-swipeable';

function SwipeableComponent() {
  const handlers = useSwipeable({
    onSwiped: (eventData) => console.log("User Swiped!", eventData),
    onSwipedLeft: () => console.log("User Swiped Left!"),
    onSwipedRight: () => console.log("User Swiped Right!"),
  });

  return <div {...handlers}>Swipe me!</div>;
}

Custom swipe distance and velocity:

const handlers = useSwipeable({
  onSwiped: (eventData) => console.log("Swiped!", eventData),
  swipeDuration: 500,
  touchEventOptions: { passive: true },
  trackMouse: true,
  trackTouch: true,
  delta: 100,
  preventDefaultTouchmoveEvent: true,
});

Using with React Router:

import { useSwipeable } from 'react-swipeable';
import { useNavigate } from 'react-router-dom';

function SwipeableNavigation() {
  const navigate = useNavigate();
  const handlers = useSwipeable({
    onSwipedLeft: () => navigate('/next-page'),
    onSwipedRight: () => navigate('/previous-page'),
  });

  return <div {...handlers}>Swipe to navigate</div>;
}

Getting Started

1. Install the package:

   npm install react-swipeable
   

2. Import and use in your React component:

   import React from 'react';
   import { useSwipeable } from 'react-swipeable';
   
   function MySwipeableComponent() {
     const handlers = useSwipeable({
       onSwiped: (eventData) => console.log("Swiped!", eventData),
       onSwipedLeft: () => console.log("Swiped left!"),
       onSwipedRight: () => console.log("Swiped right!"),
     });
   
     return (
       <div {...handlers}>
         Swipe me!
       </div>
     );
   }
   
   export default MySwipeableComponent;
   

3. Customize the swipe behavior by adjusting the options passed to useSwipeable.