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

First, install the package using npm:

npm install swiping-hooks

Basic Usage Example

Here's a simple example of how to use the useSwipe hook in your component:

import React, { useState } from "react";
import useSwipe, { TSwipeDir } from "swiping-hooks";

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

  const { onMouseDown } = 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