@msobiecki/react-marauders-path 1.27.0 → 1.28.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 +105 -59
- package/dist/index.d.ts +39 -0
- package/dist/index.js +29 -25
- package/dist/index.js.map +1 -1
- package/dist/use-gesture/use-gesture.js +43 -0
- package/dist/use-gesture/use-gesture.js.map +1 -0
- package/dist/use-gesture/use-gesture.types.js +12 -0
- package/dist/use-gesture/use-gesture.types.js.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,20 +2,21 @@
|
|
|
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, wheel, tap, double-tap, press, swipe, drag, and pinch
|
|
5
|
+
A lightweight, type-safe React library for handling keyboard, wheel, and gesture events including tap, double-tap, press, swipe, drag, and pinch interactions.
|
|
6
6
|
|
|
7
7
|

|
|
8
8
|
|
|
9
9
|
## Features
|
|
10
10
|
|
|
11
11
|
- 🎮 **Keyboard Event Handling** - Detect single keys, key combinations, and sequences with configurable timing thresholds
|
|
12
|
+
- 👐 **Gesture Event Handling** - Detect tap, double-tap, press, swipe, drag, and pinch gestures
|
|
13
|
+
- 👆 **Tap Gesture Handling** - Detect single taps or clicks with configurable movement and duration thresholds
|
|
14
|
+
- 👆👆 **Double-Tap Gesture Handling** - Detect consecutive taps or clicks with configurable timing and position thresholds
|
|
15
|
+
- ✋ **Press Gesture Handling** - Detect press-and-hold interactions with configurable delay and movement thresholds
|
|
16
|
+
- 🖐️ **Swipe Gesture Handling** - Detect directional swipes with configurable distance, velocity, and pointer type filtering
|
|
17
|
+
- ✊ **Drag Gesture Handling** - Detect movement, deltas, duration, and start/end positions with pointer type filtering and optional `requestAnimationFrame` batching
|
|
18
|
+
- 🤏 **Pinch Gesture Handling** - Detect two-finger distance, delta, and scale with pointer type filtering and optional `requestAnimationFrame` batching
|
|
12
19
|
- 🎡 **Wheel Event Handling** - Detect wheel delta values with optional `requestAnimationFrame` batching for smoother updates
|
|
13
|
-
- 👆 **Tap Gesture Handling** - Detect single taps/clicks with configurable movement and duration thresholds
|
|
14
|
-
- 👆👆 **Double-Tap Gesture Handling** - Detect consecutive taps/clicks with configurable timing and position thresholds
|
|
15
|
-
- ✋ **Press Gesture Handling** - Detect press-and-hold interactions with configurable delay and movement thresholds
|
|
16
|
-
- 🖐️ **Swipe Gesture Handling** - Detect directional swipes with configurable distance, velocity, and pointer type filtering
|
|
17
|
-
- ✊ **Drag Gesture Handling** - Detect movement, deltas, duration, and start/end positions with pointer type filtering and optional `requestAnimationFrame` batching
|
|
18
|
-
- 🤏 **Pinch Gesture Handling** - Detect two-finger distance, delta, and scale with pointer type filtering and optional `requestAnimationFrame` batching
|
|
19
20
|
|
|
20
21
|
## Installation
|
|
21
22
|
|
|
@@ -84,21 +85,23 @@ useKey(
|
|
|
84
85
|
);
|
|
85
86
|
```
|
|
86
87
|
|
|
87
|
-
###
|
|
88
|
+
### Gesture Event Hook
|
|
88
89
|
|
|
89
90
|
```typescript
|
|
90
|
-
import {
|
|
91
|
+
import { useGesture } from '@msobiecki/react-marauders-path';
|
|
91
92
|
|
|
92
93
|
function MyComponent() {
|
|
93
|
-
|
|
94
|
-
console.log(`
|
|
94
|
+
useGesture('tap', (event, data) => {
|
|
95
|
+
console.log(`Tapped at X: ${data.x}, Y: ${data.y}`);
|
|
96
|
+
}, {
|
|
97
|
+
threshold: 8,
|
|
95
98
|
});
|
|
96
99
|
|
|
97
|
-
return <div>
|
|
100
|
+
return <div>Tap to interact</div>;
|
|
98
101
|
}
|
|
99
102
|
```
|
|
100
103
|
|
|
101
|
-
|
|
104
|
+
#### Tap Event Hook
|
|
102
105
|
|
|
103
106
|
```typescript
|
|
104
107
|
import { useTap } from '@msobiecki/react-marauders-path';
|
|
@@ -112,7 +115,7 @@ function MyComponent() {
|
|
|
112
115
|
}
|
|
113
116
|
```
|
|
114
117
|
|
|
115
|
-
|
|
118
|
+
#### Double Tap Event Hook
|
|
116
119
|
|
|
117
120
|
```typescript
|
|
118
121
|
import { useDoubleTap } from '@msobiecki/react-marauders-path';
|
|
@@ -126,7 +129,7 @@ function MyComponent() {
|
|
|
126
129
|
}
|
|
127
130
|
```
|
|
128
131
|
|
|
129
|
-
|
|
132
|
+
#### Press Event Hook
|
|
130
133
|
|
|
131
134
|
```typescript
|
|
132
135
|
import { usePress } from '@msobiecki/react-marauders-path';
|
|
@@ -140,7 +143,7 @@ function MyComponent() {
|
|
|
140
143
|
}
|
|
141
144
|
```
|
|
142
145
|
|
|
143
|
-
|
|
146
|
+
#### Swipe Event Hook
|
|
144
147
|
|
|
145
148
|
```typescript
|
|
146
149
|
import { useSwipe } from '@msobiecki/react-marauders-path';
|
|
@@ -154,7 +157,7 @@ function MyComponent() {
|
|
|
154
157
|
}
|
|
155
158
|
```
|
|
156
159
|
|
|
157
|
-
|
|
160
|
+
#### Drag Event Hook
|
|
158
161
|
|
|
159
162
|
```typescript
|
|
160
163
|
import { useDrag } from '@msobiecki/react-marauders-path';
|
|
@@ -168,7 +171,7 @@ function MyComponent() {
|
|
|
168
171
|
}
|
|
169
172
|
```
|
|
170
173
|
|
|
171
|
-
|
|
174
|
+
#### Pinch Event Hook
|
|
172
175
|
|
|
173
176
|
```typescript
|
|
174
177
|
import { usePinch } from '@msobiecki/react-marauders-path';
|
|
@@ -182,6 +185,20 @@ function MyComponent() {
|
|
|
182
185
|
}
|
|
183
186
|
```
|
|
184
187
|
|
|
188
|
+
### Wheel Event Hook
|
|
189
|
+
|
|
190
|
+
```typescript
|
|
191
|
+
import { useWheel } from '@msobiecki/react-marauders-path';
|
|
192
|
+
|
|
193
|
+
function MyComponent() {
|
|
194
|
+
useWheel((event, data) => {
|
|
195
|
+
console.log(`Scrolled - X: ${data.deltaX}, Y: ${data.deltaY}`);
|
|
196
|
+
});
|
|
197
|
+
|
|
198
|
+
return <div>Scroll to interact</div>;
|
|
199
|
+
}
|
|
200
|
+
```
|
|
201
|
+
|
|
185
202
|
## API
|
|
186
203
|
|
|
187
204
|
### `useKey(keyEvent, callback, options?)`
|
|
@@ -190,8 +207,8 @@ Hook for keyboard event handling with support for single keys, combinations, and
|
|
|
190
207
|
|
|
191
208
|
**Parameters:**
|
|
192
209
|
|
|
193
|
-
- `keyEvent: string | string[]` - Single key, combination, or sequence to listen
|
|
194
|
-
- `callback: (event: KeyboardEvent, key: string) => void | boolean` - Called when key event occurs
|
|
210
|
+
- `keyEvent: string | string[]` - Single key, key combination, or key sequence to listen for
|
|
211
|
+
- `callback: (event: KeyboardEvent, key: string) => void | boolean` - Called when a key event occurs
|
|
195
212
|
- `options?: UseKeyOptions` - Optional configuration
|
|
196
213
|
|
|
197
214
|
**Options:**
|
|
@@ -209,46 +226,42 @@ interface UseKeyOptions {
|
|
|
209
226
|
}
|
|
210
227
|
```
|
|
211
228
|
|
|
212
|
-
### `
|
|
229
|
+
### `useGesture(gesture, callback, options?)`
|
|
213
230
|
|
|
214
|
-
Hook for
|
|
231
|
+
Hook for gesture event handling that delegates to one of the low-level gesture hooks.
|
|
215
232
|
|
|
216
233
|
**Parameters:**
|
|
217
234
|
|
|
218
|
-
- `
|
|
219
|
-
- `
|
|
235
|
+
- `gesture: "tap" | "doubletap" | "press" | "swipe" | "drag" | "pinch"` - Gesture to bind (must stay the same between renders)
|
|
236
|
+
- `callback` - Callback type is inferred from `gesture`
|
|
237
|
+
- `options?` - Options type is inferred from `gesture`
|
|
220
238
|
|
|
221
|
-
**
|
|
239
|
+
**Swipe-only option:**
|
|
222
240
|
|
|
223
|
-
|
|
224
|
-
interface UseWheelOptions {
|
|
225
|
-
eventPassive?: boolean; // Default: true
|
|
226
|
-
eventCapture?: boolean; // Default: false
|
|
227
|
-
eventOnce?: boolean; // Default: false
|
|
228
|
-
eventStopImmediatePropagation?: boolean; // Default: false
|
|
229
|
-
container?: RefObject<HTMLElement>; // Default: window
|
|
230
|
-
raf?: boolean; // Default: false - Use requestAnimationFrame for batching
|
|
231
|
-
}
|
|
232
|
-
```
|
|
241
|
+
- `direction?: SwipeDirection` - Optional direction for `useGesture("swipe", ...)`; defaults to `"both"`
|
|
233
242
|
|
|
234
|
-
**
|
|
243
|
+
**Example:**
|
|
235
244
|
|
|
236
245
|
```typescript
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
246
|
+
useGesture(
|
|
247
|
+
"swipe",
|
|
248
|
+
(event, direction, data) => {
|
|
249
|
+
console.log(direction, data.velocity);
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
direction: "horizontal",
|
|
253
|
+
threshold: 40,
|
|
254
|
+
},
|
|
255
|
+
);
|
|
243
256
|
```
|
|
244
257
|
|
|
245
|
-
|
|
258
|
+
#### `useTap(callback, options?)`
|
|
246
259
|
|
|
247
260
|
Hook for handling single tap/click interactions.
|
|
248
261
|
|
|
249
262
|
**Parameters:**
|
|
250
263
|
|
|
251
|
-
- `callback: (event: PointerEvent, data: TapData) => void | boolean` - Called when tap gesture is recognized
|
|
264
|
+
- `callback: (event: PointerEvent, data: TapData) => void | boolean` - Called when a tap gesture is recognized
|
|
252
265
|
- `options?: UseTapOptions` - Optional configuration
|
|
253
266
|
|
|
254
267
|
**Options:**
|
|
@@ -274,13 +287,13 @@ interface TapData {
|
|
|
274
287
|
}
|
|
275
288
|
```
|
|
276
289
|
|
|
277
|
-
|
|
290
|
+
#### `useDoubleTap(callback, options?)`
|
|
278
291
|
|
|
279
292
|
Hook for handling double-tap / double-click interactions.
|
|
280
293
|
|
|
281
294
|
**Parameters:**
|
|
282
295
|
|
|
283
|
-
- `callback: (event: PointerEvent, data: DoubleTapData) => void | boolean` - Called when double tap is recognized
|
|
296
|
+
- `callback: (event: PointerEvent, data: DoubleTapData) => void | boolean` - Called when a double tap is recognized
|
|
284
297
|
- `options?: UseDoubleTapOptions` - Optional configuration
|
|
285
298
|
|
|
286
299
|
**Options:**
|
|
@@ -306,13 +319,13 @@ interface DoubleTapData {
|
|
|
306
319
|
}
|
|
307
320
|
```
|
|
308
321
|
|
|
309
|
-
|
|
322
|
+
#### `usePress(callback, options?)`
|
|
310
323
|
|
|
311
324
|
Hook for handling press-and-hold interactions.
|
|
312
325
|
|
|
313
326
|
**Parameters:**
|
|
314
327
|
|
|
315
|
-
- `callback: (event: PointerEvent, data: PressData) => void | boolean` - Called when press delay completes
|
|
328
|
+
- `callback: (event: PointerEvent, data: PressData) => void | boolean` - Called when a press delay completes
|
|
316
329
|
- `options?: UsePressOptions` - Optional configuration
|
|
317
330
|
|
|
318
331
|
**Options:**
|
|
@@ -338,13 +351,13 @@ interface PressData {
|
|
|
338
351
|
}
|
|
339
352
|
```
|
|
340
353
|
|
|
341
|
-
|
|
354
|
+
#### `useSwipe(swipe, callback, options?)`
|
|
342
355
|
|
|
343
356
|
Hook for handling touch swipe gestures with configurable distance and velocity thresholds.
|
|
344
357
|
|
|
345
358
|
**Parameters:**
|
|
346
359
|
|
|
347
|
-
- `swipe: left | right | up | down | horizontal | vertical | both` - Allowed directions to listen
|
|
360
|
+
- `swipe: "left" | "right" | "up" | "down" | "horizontal" | "vertical" | "both"` - Allowed directions to listen
|
|
348
361
|
- `callback: (event: PointerEvent, direction: SwipeDirection, data: SwipeData) => void | boolean` - Called when a swipe event occurs
|
|
349
362
|
- `options?: UseSwipeOptions` - Optional configuration
|
|
350
363
|
|
|
@@ -373,13 +386,13 @@ interface SwipeData {
|
|
|
373
386
|
}
|
|
374
387
|
```
|
|
375
388
|
|
|
376
|
-
|
|
389
|
+
#### `useDrag(callback, options?)`
|
|
377
390
|
|
|
378
391
|
Hook for handling pointer drag gestures with configurable threshold and pointer types.
|
|
379
392
|
|
|
380
393
|
**Parameters:**
|
|
381
394
|
|
|
382
|
-
- `callback: (event: PointerEvent, data: DragData) => void | boolean` - Called when drag event occurs
|
|
395
|
+
- `callback: (event: PointerEvent, data: DragData) => void | boolean` - Called when a drag event occurs
|
|
383
396
|
- `options?: UseDragOptions` - Optional configuration
|
|
384
397
|
|
|
385
398
|
**Options:**
|
|
@@ -412,13 +425,13 @@ interface DragData {
|
|
|
412
425
|
}
|
|
413
426
|
```
|
|
414
427
|
|
|
415
|
-
|
|
428
|
+
#### `usePinch(callback, options?)`
|
|
416
429
|
|
|
417
430
|
Hook for handling two-pointer pinch gestures with distance and scale tracking.
|
|
418
431
|
|
|
419
432
|
**Parameters:**
|
|
420
433
|
|
|
421
|
-
- `callback: (event: PointerEvent, data: PinchData) => void | boolean` - Called when pinch event occurs
|
|
434
|
+
- `callback: (event: PointerEvent, data: PinchData) => void | boolean` - Called when a pinch event occurs
|
|
422
435
|
- `options?: UsePinchOptions` - Optional configuration
|
|
423
436
|
|
|
424
437
|
**Options:**
|
|
@@ -446,6 +459,39 @@ interface PinchData {
|
|
|
446
459
|
}
|
|
447
460
|
```
|
|
448
461
|
|
|
462
|
+
### `useWheel(callback, options?)`
|
|
463
|
+
|
|
464
|
+
Hook for handling mouse wheel events with support for different delta modes and options.
|
|
465
|
+
|
|
466
|
+
**Parameters:**
|
|
467
|
+
|
|
468
|
+
- `callback: (event: WheelEvent, data: WheelData) => void | boolean` - Called when a wheel event occurs
|
|
469
|
+
- `options?: UseWheelOptions` - Optional configuration
|
|
470
|
+
|
|
471
|
+
**Options:**
|
|
472
|
+
|
|
473
|
+
```typescript
|
|
474
|
+
interface UseWheelOptions {
|
|
475
|
+
eventPassive?: boolean; // Default: true
|
|
476
|
+
eventCapture?: boolean; // Default: false
|
|
477
|
+
eventOnce?: boolean; // Default: false
|
|
478
|
+
eventStopImmediatePropagation?: boolean; // Default: false
|
|
479
|
+
container?: RefObject<HTMLElement>; // Default: window
|
|
480
|
+
raf?: boolean; // Default: false - Use requestAnimationFrame for batching
|
|
481
|
+
}
|
|
482
|
+
```
|
|
483
|
+
|
|
484
|
+
**Wheel Data:**
|
|
485
|
+
|
|
486
|
+
```typescript
|
|
487
|
+
interface WheelData {
|
|
488
|
+
deltaX: number; // Delta X value
|
|
489
|
+
deltaY: number; // Delta Y value
|
|
490
|
+
deltaZ: number; // Delta Z value
|
|
491
|
+
deltaMode: number; // Delta mode value
|
|
492
|
+
}
|
|
493
|
+
```
|
|
494
|
+
|
|
449
495
|
## Advanced Examples
|
|
450
496
|
|
|
451
497
|
### Using Options for Event Type and Propagation Control
|
|
@@ -546,14 +592,14 @@ npm run lint
|
|
|
546
592
|
|
|
547
593
|
### High-level Gesture Hook
|
|
548
594
|
|
|
549
|
-
-
|
|
595
|
+
- ✅ **`useGesture`** – high-level API for gesture handling
|
|
550
596
|
Supported gestures:
|
|
551
597
|
- `tap` – single tap / click
|
|
552
|
-
- `
|
|
553
|
-
- `press`
|
|
598
|
+
- `doubletap` – quick double tap
|
|
599
|
+
- `press` – press and hold
|
|
554
600
|
- `swipe` – directional swipe
|
|
555
|
-
- `drag`
|
|
556
|
-
- `pinch`
|
|
601
|
+
- `drag` – track movement of finger or mouse
|
|
602
|
+
- `pinch` – two-finger pinch / zoom
|
|
557
603
|
|
|
558
604
|
### Pointer / Mouse Hooks (Unified)
|
|
559
605
|
|
package/dist/index.d.ts
CHANGED
|
@@ -75,6 +75,17 @@ export declare interface DragState {
|
|
|
75
75
|
active: boolean;
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
+
export declare type GestureType = (typeof GestureTypes)[keyof typeof GestureTypes];
|
|
79
|
+
|
|
80
|
+
export declare const GestureTypes: {
|
|
81
|
+
readonly Tap: "tap";
|
|
82
|
+
readonly DoubleTap: "doubletap";
|
|
83
|
+
readonly Press: "press";
|
|
84
|
+
readonly Swipe: "swipe";
|
|
85
|
+
readonly Drag: "drag";
|
|
86
|
+
readonly Pinch: "pinch";
|
|
87
|
+
};
|
|
88
|
+
|
|
78
89
|
export declare type Key = string;
|
|
79
90
|
|
|
80
91
|
export declare type KeyChord = (Key | Key[])[];
|
|
@@ -255,6 +266,34 @@ export declare type UseDragCallback = ((event: PointerEvent, data: DragData) =>
|
|
|
255
266
|
|
|
256
267
|
export declare type UseDragOptions = Partial<DragOptions>;
|
|
257
268
|
|
|
269
|
+
export declare const useGesture: <T extends UseGestureSchema>(gesture: T, callback: UseGestureCallback<T>, options?: UseGestureOptions<T>) => void;
|
|
270
|
+
|
|
271
|
+
export declare type UseGestureCallback<T extends UseGestureSchema> = UseGestureCallbackMap[T];
|
|
272
|
+
|
|
273
|
+
declare interface UseGestureCallbackMap {
|
|
274
|
+
[GestureTypes.Tap]: UseTapCallback;
|
|
275
|
+
[GestureTypes.DoubleTap]: UseDoubleTapCallback;
|
|
276
|
+
[GestureTypes.Press]: UsePressCallback;
|
|
277
|
+
[GestureTypes.Swipe]: UseSwipeCallback;
|
|
278
|
+
[GestureTypes.Drag]: UseDragCallback;
|
|
279
|
+
[GestureTypes.Pinch]: UsePinchCallback;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
export declare type UseGestureOptions<T extends UseGestureSchema> = UseGestureOptionsMap[T];
|
|
283
|
+
|
|
284
|
+
declare interface UseGestureOptionsMap {
|
|
285
|
+
[GestureTypes.Tap]: UseTapOptions;
|
|
286
|
+
[GestureTypes.DoubleTap]: UseDoubleTapOptions;
|
|
287
|
+
[GestureTypes.Press]: UsePressOptions;
|
|
288
|
+
[GestureTypes.Swipe]: ({
|
|
289
|
+
direction: SwipeDirection;
|
|
290
|
+
} & UseSwipeOptions) | UseSwipeOptions;
|
|
291
|
+
[GestureTypes.Drag]: UseDragOptions;
|
|
292
|
+
[GestureTypes.Pinch]: UsePinchOptions;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
export declare type UseGestureSchema = GestureType;
|
|
296
|
+
|
|
258
297
|
/**
|
|
259
298
|
* React hook for handling keyboard events with support for key sequences and combinations.
|
|
260
299
|
*
|
package/dist/index.js
CHANGED
|
@@ -1,34 +1,38 @@
|
|
|
1
1
|
import { default as o } from "./use-double-tap/use-double-tap.js";
|
|
2
|
-
import { DoubleTapEventPointerTypes as
|
|
2
|
+
import { DoubleTapEventPointerTypes as s } from "./use-double-tap/use-double-tap.types.js";
|
|
3
3
|
import { default as f } from "./use-drag/use-drag.js";
|
|
4
4
|
import { DragEventPointerTypes as u } from "./use-drag/use-drag.types.js";
|
|
5
|
-
import { default as
|
|
6
|
-
import {
|
|
7
|
-
import { default as T } from "./use-
|
|
8
|
-
import {
|
|
9
|
-
import { default as v } from "./use-
|
|
10
|
-
import {
|
|
11
|
-
import { default as h } from "./use-
|
|
12
|
-
import {
|
|
13
|
-
import { default as
|
|
14
|
-
import {
|
|
15
|
-
import { default as
|
|
5
|
+
import { default as x } from "./use-gesture/use-gesture.js";
|
|
6
|
+
import { GestureTypes as i } from "./use-gesture/use-gesture.types.js";
|
|
7
|
+
import { default as T } from "./use-key/use-key.js";
|
|
8
|
+
import { KeyEventTypes as P } from "./use-key/use-key.types.js";
|
|
9
|
+
import { default as v } from "./use-pinch/use-pinch.js";
|
|
10
|
+
import { PinchEventPointerTypes as D } from "./use-pinch/use-pinch.types.js";
|
|
11
|
+
import { default as h } from "./use-press/use-press.js";
|
|
12
|
+
import { PressEventPointerTypes as S } from "./use-press/use-press.types.js";
|
|
13
|
+
import { default as g } from "./use-swipe/use-swipe.js";
|
|
14
|
+
import { SwipeDirections as K, SwipeEventPointerTypes as W } from "./use-swipe/use-swipe.types.js";
|
|
15
|
+
import { default as k } from "./use-tap/use-tap.js";
|
|
16
|
+
import { TapEventPointerTypes as z } from "./use-tap/use-tap.types.js";
|
|
17
|
+
import { default as B } from "./use-wheel/use-wheel.js";
|
|
16
18
|
export {
|
|
17
|
-
|
|
19
|
+
s as DoubleTapEventPointerTypes,
|
|
18
20
|
u as DragEventPointerTypes,
|
|
19
|
-
i as
|
|
20
|
-
|
|
21
|
-
D as
|
|
22
|
-
S as
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
i as GestureTypes,
|
|
22
|
+
P as KeyEventTypes,
|
|
23
|
+
D as PinchEventPointerTypes,
|
|
24
|
+
S as PressEventPointerTypes,
|
|
25
|
+
K as SwipeDirections,
|
|
26
|
+
W as SwipeEventPointerTypes,
|
|
27
|
+
z as TapEventPointerTypes,
|
|
25
28
|
o as useDoubleTap,
|
|
26
29
|
f as useDrag,
|
|
27
|
-
|
|
28
|
-
T as
|
|
29
|
-
v as
|
|
30
|
-
h as
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
x as useGesture,
|
|
31
|
+
T as useKey,
|
|
32
|
+
v as usePinch,
|
|
33
|
+
h as usePress,
|
|
34
|
+
g as useSwipe,
|
|
35
|
+
k as useTap,
|
|
36
|
+
B as useWheel
|
|
33
37
|
};
|
|
34
38
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { useRef as n } from "react";
|
|
2
|
+
import i from "../use-tap/use-tap.js";
|
|
3
|
+
import p from "../use-double-tap/use-double-tap.js";
|
|
4
|
+
import c from "../use-press/use-press.js";
|
|
5
|
+
import m from "../use-swipe/use-swipe.js";
|
|
6
|
+
import { SwipeDirections as a } from "../use-swipe/use-swipe.types.js";
|
|
7
|
+
import f from "../use-drag/use-drag.js";
|
|
8
|
+
import G from "../use-pinch/use-pinch.js";
|
|
9
|
+
const l = (e, s) => {
|
|
10
|
+
i(e, s);
|
|
11
|
+
}, w = (e, s) => {
|
|
12
|
+
p(e, s);
|
|
13
|
+
}, d = (e, s) => {
|
|
14
|
+
c(e, s);
|
|
15
|
+
}, h = (e, s) => {
|
|
16
|
+
const { direction: t = a.Both, ...r } = s;
|
|
17
|
+
m(t, e, r);
|
|
18
|
+
}, b = (e, s) => {
|
|
19
|
+
f(e, s);
|
|
20
|
+
}, g = (e, s) => {
|
|
21
|
+
G(e, s);
|
|
22
|
+
}, D = {
|
|
23
|
+
tap: l,
|
|
24
|
+
doubletap: w,
|
|
25
|
+
press: d,
|
|
26
|
+
swipe: h,
|
|
27
|
+
drag: b,
|
|
28
|
+
pinch: g
|
|
29
|
+
}, E = (e, s, t = {}) => {
|
|
30
|
+
const r = n(null);
|
|
31
|
+
r.current === null && (r.current = e);
|
|
32
|
+
const o = r.current;
|
|
33
|
+
if (e !== o)
|
|
34
|
+
throw new Error(
|
|
35
|
+
"useGesture does not support changing gesture type between renders."
|
|
36
|
+
);
|
|
37
|
+
const u = D[o];
|
|
38
|
+
u(s, t);
|
|
39
|
+
};
|
|
40
|
+
export {
|
|
41
|
+
E as default
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=use-gesture.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-gesture.js","sources":["../../src/use-gesture/use-gesture.ts"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { useTap } from \"../use-tap\";\nimport { useDoubleTap } from \"../use-double-tap\";\nimport { usePress } from \"../use-press\";\nimport { SwipeDirections, useSwipe, UseSwipeSchema } from \"../use-swipe\";\nimport { useDrag } from \"../use-drag\";\nimport { usePinch } from \"../use-pinch\";\n\nimport {\n UseGestureSchema,\n UseGestureCallback,\n UseGestureOptions,\n} from \"./use-gesture.types\";\n\nconst useGestureTap = (\n callback: UseGestureCallback<\"tap\">,\n options: UseGestureOptions<\"tap\">,\n) => {\n useTap(callback, options);\n};\n\nconst useGestureDoubleTap = (\n callback: UseGestureCallback<\"doubletap\">,\n options: UseGestureOptions<\"doubletap\">,\n) => {\n useDoubleTap(callback, options);\n};\n\nconst useGesturePress = (\n callback: UseGestureCallback<\"press\">,\n options: UseGestureOptions<\"press\">,\n) => {\n usePress(callback, options);\n};\n\nconst useGestureSwipe = (\n callback: UseGestureCallback<\"swipe\">,\n options: UseGestureOptions<\"swipe\">,\n) => {\n const { direction = SwipeDirections.Both, ...swipeOptions } =\n options as UseGestureOptions<\"swipe\"> & {\n direction?: UseSwipeSchema;\n };\n\n useSwipe(direction, callback, swipeOptions);\n};\n\nconst useGestureDrag = (\n callback: UseGestureCallback<\"drag\">,\n options: UseGestureOptions<\"drag\">,\n) => {\n useDrag(callback, options);\n};\n\nconst useGesturePinch = (\n callback: UseGestureCallback<\"pinch\">,\n options: UseGestureOptions<\"pinch\">,\n) => {\n usePinch(callback, options);\n};\n\nconst useGestureMap = {\n tap: useGestureTap,\n doubletap: useGestureDoubleTap,\n press: useGesturePress,\n swipe: useGestureSwipe,\n drag: useGestureDrag,\n pinch: useGesturePinch,\n} as const;\n\nconst useGesture = <T extends UseGestureSchema>(\n gesture: T,\n callback: UseGestureCallback<T>,\n options: UseGestureOptions<T> = {} as UseGestureOptions<T>,\n): void => {\n const initialGestureReference = useRef<T | null>(null);\n\n if (initialGestureReference.current === null) {\n initialGestureReference.current = gesture;\n }\n\n const stableGesture = initialGestureReference.current;\n\n if (gesture !== stableGesture) {\n throw new Error(\n \"useGesture does not support changing gesture type between renders.\",\n );\n }\n\n const useSelectedGestureHook = useGestureMap[stableGesture] as (\n callback: UseGestureCallback<T>,\n options: UseGestureOptions<T>,\n ) => void;\n\n useSelectedGestureHook(callback, options);\n};\n\nexport default useGesture;\n"],"names":["useGestureTap","callback","options","useTap","useGestureDoubleTap","useDoubleTap","useGesturePress","usePress","useGestureSwipe","direction","SwipeDirections","swipeOptions","useSwipe","useGestureDrag","useDrag","useGesturePinch","usePinch","useGestureMap","useGesture","gesture","initialGestureReference","useRef","stableGesture","useSelectedGestureHook"],"mappings":";;;;;;;;AAeA,MAAMA,IAAgB,CACpBC,GACAC,MACG;AACH,EAAAC,EAAOF,GAAUC,CAAO;AAC1B,GAEME,IAAsB,CAC1BH,GACAC,MACG;AACH,EAAAG,EAAaJ,GAAUC,CAAO;AAChC,GAEMI,IAAkB,CACtBL,GACAC,MACG;AACH,EAAAK,EAASN,GAAUC,CAAO;AAC5B,GAEMM,IAAkB,CACtBP,GACAC,MACG;AACH,QAAM,EAAE,WAAAO,IAAYC,EAAgB,MAAM,GAAGC,MAC3CT;AAIF,EAAAU,EAASH,GAAWR,GAAUU,CAAY;AAC5C,GAEME,IAAiB,CACrBZ,GACAC,MACG;AACH,EAAAY,EAAQb,GAAUC,CAAO;AAC3B,GAEMa,IAAkB,CACtBd,GACAC,MACG;AACH,EAAAc,EAASf,GAAUC,CAAO;AAC5B,GAEMe,IAAgB;AAAA,EACpB,KAAKjB;AAAA,EACL,WAAWI;AAAA,EACX,OAAOE;AAAA,EACP,OAAOE;AAAA,EACP,MAAMK;AAAA,EACN,OAAOE;AACT,GAEMG,IAAa,CACjBC,GACAlB,GACAC,IAAgC,CAAA,MACvB;AACT,QAAMkB,IAA0BC,EAAiB,IAAI;AAErD,EAAID,EAAwB,YAAY,SACtCA,EAAwB,UAAUD;AAGpC,QAAMG,IAAgBF,EAAwB;AAE9C,MAAID,MAAYG;AACd,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAIJ,QAAMC,IAAyBN,EAAcK,CAAa;AAK1D,EAAAC,EAAuBtB,GAAUC,CAAO;AAC1C;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-gesture.types.js","sources":["../../src/use-gesture/use-gesture.types.ts"],"sourcesContent":["import { UseDoubleTapCallback, UseDoubleTapOptions } from \"../use-double-tap\";\nimport { UseDragCallback, UseDragOptions } from \"../use-drag\";\nimport { UsePinchCallback, UsePinchOptions } from \"../use-pinch\";\nimport { UsePressCallback, UsePressOptions } from \"../use-press\";\nimport {\n SwipeDirection,\n UseSwipeCallback,\n UseSwipeOptions,\n} from \"../use-swipe\";\nimport { UseTapCallback, UseTapOptions } from \"../use-tap\";\n\nexport const GestureTypes = {\n Tap: \"tap\",\n DoubleTap: \"doubletap\",\n Press: \"press\",\n Swipe: \"swipe\",\n Drag: \"drag\",\n Pinch: \"pinch\",\n} as const;\n\nexport type GestureType = (typeof GestureTypes)[keyof typeof GestureTypes];\n\nexport type UseGestureSchema = GestureType;\n\ninterface UseGestureCallbackMap {\n [GestureTypes.Tap]: UseTapCallback;\n [GestureTypes.DoubleTap]: UseDoubleTapCallback;\n [GestureTypes.Press]: UsePressCallback;\n [GestureTypes.Swipe]: UseSwipeCallback;\n [GestureTypes.Drag]: UseDragCallback;\n [GestureTypes.Pinch]: UsePinchCallback;\n}\n\ninterface UseGestureOptionsMap {\n [GestureTypes.Tap]: UseTapOptions;\n [GestureTypes.DoubleTap]: UseDoubleTapOptions;\n [GestureTypes.Press]: UsePressOptions;\n [GestureTypes.Swipe]:\n | ({ direction: SwipeDirection } & UseSwipeOptions)\n | UseSwipeOptions;\n [GestureTypes.Drag]: UseDragOptions;\n [GestureTypes.Pinch]: UsePinchOptions;\n}\n\nexport type UseGestureCallback<T extends UseGestureSchema> =\n UseGestureCallbackMap[T];\n\nexport type UseGestureOptions<T extends UseGestureSchema> =\n UseGestureOptionsMap[T];\n"],"names":["GestureTypes"],"mappings":"AAWO,MAAMA,IAAe;AAAA,EAC1B,KAAK;AAAA,EACL,WAAW;AAAA,EACX,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AACT;"}
|
package/package.json
CHANGED