@msobiecki/react-marauders-path 1.13.0 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://github.com/msobiecki/react-marauders-path/blob/master/LICENSE)
|
|
4
4
|
|
|
5
|
-
A lightweight, type-safe React library for handling keyboard events. Perfect for games, interactive applications, and
|
|
5
|
+
A lightweight, type-safe React library for handling keyboard, wheel, and swipe events. Perfect for games, interactive applications, and input-driven interfaces.
|
|
6
6
|
|
|
7
7
|

|
|
8
8
|
|
|
@@ -10,6 +10,7 @@ A lightweight, type-safe React library for handling keyboard events. Perfect for
|
|
|
10
10
|
|
|
11
11
|
- 🎮 **Keyboard Event Handling** - Simple API for detecting single keys, key combinations, and sequences
|
|
12
12
|
- 🎡 **Wheel Event Handling** - Mouse wheel scrolling with delta tracking and batching support
|
|
13
|
+
- 🖐️ **Swipe Gesture Handling** - Touch swipe detection with distance and velocity thresholds
|
|
13
14
|
|
|
14
15
|
## Installation
|
|
15
16
|
|
|
@@ -92,6 +93,20 @@ function MyComponent() {
|
|
|
92
93
|
}
|
|
93
94
|
```
|
|
94
95
|
|
|
96
|
+
### Swipe Event Hook
|
|
97
|
+
|
|
98
|
+
```typescript
|
|
99
|
+
import { useSwipe } from '@msobiecki/react-marauders-path';
|
|
100
|
+
|
|
101
|
+
function MyComponent() {
|
|
102
|
+
useSwipe('left' (event, swipe) => {
|
|
103
|
+
console.log(`Swiped ${swipe.direction} with velocity ${swipe.velocity}`);
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
return <div>Swipe left</div>;
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
95
110
|
## API
|
|
96
111
|
|
|
97
112
|
### `useKey(keyEvent, callback, options?)`
|
|
@@ -100,7 +115,7 @@ Main hook for keyboard event handling.
|
|
|
100
115
|
|
|
101
116
|
**Parameters:**
|
|
102
117
|
|
|
103
|
-
- `keyEvent: string | string[]` - Single key, combination, or sequence to listen
|
|
118
|
+
- `keyEvent: string | string[]` - Single key, combination, or sequence to listen
|
|
104
119
|
- `callback: (event: KeyboardEvent, key: string) => void | boolean` - Called when key event occurs
|
|
105
120
|
- `options?: UseKeyOptions` - Optional configuration
|
|
106
121
|
|
|
@@ -119,12 +134,6 @@ interface UseKeyOptions {
|
|
|
119
134
|
}
|
|
120
135
|
```
|
|
121
136
|
|
|
122
|
-
### `useKeyOnce(keyEvent, callback, options?)`
|
|
123
|
-
|
|
124
|
-
One-time keyboard event listener. Automatically removes after first trigger.
|
|
125
|
-
|
|
126
|
-
**Parameters:** Same as `useKey`
|
|
127
|
-
|
|
128
137
|
### `useWheel(callback, options?)`
|
|
129
138
|
|
|
130
139
|
Hook for handling mouse wheel events with support for different delta modes and options.
|
|
@@ -154,6 +163,42 @@ interface WheelData {
|
|
|
154
163
|
x: number; // Delta X value
|
|
155
164
|
y: number; // Delta Y value
|
|
156
165
|
z: number; // Delta Z value
|
|
166
|
+
deltaMode: number; // Delta mode value
|
|
167
|
+
}
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### `useSwipe(swipe, callback, options?)`
|
|
171
|
+
|
|
172
|
+
Hook for handling touch swipe gestures with configurable distance and velocity thresholds.
|
|
173
|
+
|
|
174
|
+
**Parameters:**
|
|
175
|
+
|
|
176
|
+
- `swipe: left | right | up | down | horizontal | vertical | both` - Allowed directions to listen
|
|
177
|
+
- `callback: (event: TouchEvent, data: SwipeData) => void | boolean` - Called when a swipe event occurs
|
|
178
|
+
- `options?: UseSwipeOptions` - Optional configuration
|
|
179
|
+
|
|
180
|
+
**Options:**
|
|
181
|
+
|
|
182
|
+
```typescript
|
|
183
|
+
interface UseSwipeOptions {
|
|
184
|
+
eventCapture?: boolean; // Default: false
|
|
185
|
+
eventOnce?: boolean; // Default: false
|
|
186
|
+
eventStopImmediatePropagation?: boolean; // Default: false
|
|
187
|
+
threshold?: number; // Default: 50 (px) - Minimum travel distance
|
|
188
|
+
velocity?: number; // Default: 0.3 (px/ms) - Minimum average speed
|
|
189
|
+
container?: RefObject<HTMLElement>; // Default: window
|
|
190
|
+
}
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
**Swipe Data:**
|
|
194
|
+
|
|
195
|
+
```typescript
|
|
196
|
+
interface SwipeData {
|
|
197
|
+
direction: SwipeDirection; // Resolved direction
|
|
198
|
+
deltaX: number; // Horizontal travel
|
|
199
|
+
deltaY: number; // Vertical travel
|
|
200
|
+
velocity: number; // Average speed (distance / duration)
|
|
201
|
+
duration: number; // Swipe duration in ms
|
|
157
202
|
}
|
|
158
203
|
```
|
|
159
204
|
|