@msobiecki/react-marauders-path 1.9.0 → 1.10.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 +52 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,6 +7,7 @@ A lightweight, type-safe React library for handling keyboard events. Perfect for
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
9
9
|
- 🎮 **Keyboard Event Handling** - Simple API for detecting single keys, key combinations, and sequences
|
|
10
|
+
- 🎡 **Wheel Event Handling** - Mouse wheel scrolling with delta tracking and batching support
|
|
10
11
|
|
|
11
12
|
## Installation
|
|
12
13
|
|
|
@@ -16,6 +17,8 @@ npm install @msobiecki/react-marauders-path
|
|
|
16
17
|
|
|
17
18
|
## Quick Start
|
|
18
19
|
|
|
20
|
+
### Key Event Hook
|
|
21
|
+
|
|
19
22
|
#### Single Key Schema
|
|
20
23
|
|
|
21
24
|
```typescript
|
|
@@ -30,7 +33,7 @@ function MyComponent() {
|
|
|
30
33
|
}
|
|
31
34
|
```
|
|
32
35
|
|
|
33
|
-
|
|
36
|
+
#### Multiple Patterns of Single Key Schema
|
|
34
37
|
|
|
35
38
|
```typescript
|
|
36
39
|
useKey(["a", "b", "c"], (event, key) => {
|
|
@@ -46,7 +49,7 @@ useKey("a+b", (event, key) => {
|
|
|
46
49
|
});
|
|
47
50
|
```
|
|
48
51
|
|
|
49
|
-
|
|
52
|
+
#### Multiple Patterns of Combination Key Schema
|
|
50
53
|
|
|
51
54
|
```typescript
|
|
52
55
|
useKey(["a+b", "c+d"], (event, key) => {
|
|
@@ -54,7 +57,7 @@ useKey(["a+b", "c+d"], (event, key) => {
|
|
|
54
57
|
});
|
|
55
58
|
```
|
|
56
59
|
|
|
57
|
-
|
|
60
|
+
#### Sequential Key Schema
|
|
58
61
|
|
|
59
62
|
```typescript
|
|
60
63
|
useKey("ArrowUp ArrowUp ArrowDown ArrowDown", (event, key) => {
|
|
@@ -73,6 +76,20 @@ useKey(
|
|
|
73
76
|
);
|
|
74
77
|
```
|
|
75
78
|
|
|
79
|
+
### Wheel Event Hook
|
|
80
|
+
|
|
81
|
+
```typescript
|
|
82
|
+
import { useWheel } from '@msobiecki/react-marauders-path';
|
|
83
|
+
|
|
84
|
+
function MyComponent() {
|
|
85
|
+
useWheel((event, delta) => {
|
|
86
|
+
console.log(`Scrolled - X: ${delta.x}, Y: ${delta.y}`);
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
return <div>Scroll to interact</div>;
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
76
93
|
## API
|
|
77
94
|
|
|
78
95
|
### `useKey(keyEvent, callback, options?)`
|
|
@@ -106,6 +123,38 @@ One-time keyboard event listener. Automatically removes after first trigger.
|
|
|
106
123
|
|
|
107
124
|
**Parameters:** Same as `useKey`
|
|
108
125
|
|
|
126
|
+
### `useWheel(callback, options?)`
|
|
127
|
+
|
|
128
|
+
Hook for handling mouse wheel events with support for different delta modes and options.
|
|
129
|
+
|
|
130
|
+
**Parameters:**
|
|
131
|
+
|
|
132
|
+
- `callback: (event: WheelEvent, delta: WheelData) => void | boolean` - Called when wheel event occurs
|
|
133
|
+
- `options?: UseWheelOptions` - Optional configuration
|
|
134
|
+
|
|
135
|
+
**Options:**
|
|
136
|
+
|
|
137
|
+
```typescript
|
|
138
|
+
interface UseWheelOptions {
|
|
139
|
+
eventPassive?: boolean; // Default: true - Use passive event listener
|
|
140
|
+
eventCapture?: boolean; // Default: false - Use capture phase
|
|
141
|
+
eventOnce?: boolean; // Default: false - Listen only once
|
|
142
|
+
eventStopImmediatePropagation?: boolean; // Default: false
|
|
143
|
+
container?: RefObject<HTMLElement>; // Default: window
|
|
144
|
+
raf?: boolean; // Default: false - Use requestAnimationFrame for batching
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
**Delta Data:**
|
|
149
|
+
|
|
150
|
+
```typescript
|
|
151
|
+
interface WheelData {
|
|
152
|
+
x: number; // Delta X value
|
|
153
|
+
y: number; // Delta Y value
|
|
154
|
+
z: number; // Delta Z value
|
|
155
|
+
}
|
|
156
|
+
```
|
|
157
|
+
|
|
109
158
|
## Advanced Examples
|
|
110
159
|
|
|
111
160
|
### Using Options for Event Type and Propagation Control
|