Swiping Hooks

Demo

https://emxemirc.github.io/swiping-hooks/

⚠️ EARLY DEVELOPMENT WARNING ⚠️

This project is in a very early development stage and is NOT ready for production use. The API is unstable and subject to major changes. Use at your own risk.

useSwipe is a React hook to manage swipe gestures.

Features

• Lightweight & Customizable
• TypeScript Support
• Simple event handlers for mouse/touch

Getting Started (Manual Setup)

As this package is not yet published, you can integrate the useSwipe hook by copying the source code from src/hooks/swipe.tsx (and related files like src/hooks/types.ts, src/hooks/helpers.ts) directly into your project.

Basic Usage Example

Assuming you have copied useSwipe.tsx, types.ts, and helpers.ts into a hooks directory within your project:

import React, { useState } from 'react';
// Adjust path based on where you copied the hook files
import useSwipe, { TSwipeDir } from './hooks/useSwipe'; 

const SwipeableComponent = () => {
  const [swipeDirection, setSwipeDirection] = useState<TSwipeDir | null>(null);

  const { handleMouseDown, handleMouseMove, handleMouseUp } = useSwipe({
    threshold: 50,
    onSwiped: ({ dir }) => {
      setSwipeDirection(dir);
      console.log(`Swiped: ${dir}`);
    },
  });

  return (
    <div
      style={{ /* ... some basic styles ... */ userSelect: 'none' }}
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      // Consider adding touch event handlers (see USAGE.md)
    >
      <p>Swipe here!</p>
      {swipeDirection && <p>Last swipe: {swipeDirection}</p>}
    </div>
  );
};

export default SwipeableComponent;

Documentation

• Usage Guide: How to use useSwipe.
• API Reference: Hook parameters, return values, and types.

Storybook (Live Examples)

To see the hook in action:

npm run storybook

Testing

Unit Tests:

npm test

End-to-End Tests (Playwright):

npx playwright test

License

MIT