react-global-tracking 0.1.2 → 0.1.4-test.1
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 +9 -17
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -65,6 +65,15 @@ tracker.on('click', handler, { once: true })
|
|
|
65
65
|
tracker.on('click', handler, { selector: 'nav a' })
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
+
**Options:**
|
|
69
|
+
|
|
70
|
+
| Option | Type | Description |
|
|
71
|
+
|--------|------|-------------|
|
|
72
|
+
| `debounce` | `number` | Debounce the callback by the given milliseconds |
|
|
73
|
+
| `throttle` | `number` | Throttle the callback by the given milliseconds |
|
|
74
|
+
| `once` | `boolean` | Automatically unsubscribe after the first invocation |
|
|
75
|
+
| `selector` | `string` | Only fire the callback when the target matches the CSS selector (global `ignoreSelectors` is still applied first) |
|
|
76
|
+
|
|
68
77
|
Multiple listeners can be registered for the same event type — each fires independently, similar to `addEventListener`.
|
|
69
78
|
|
|
70
79
|
### `tracker.getLastEvent(): TrackEvent | null`
|
|
@@ -108,23 +117,6 @@ interface FiberInfo {
|
|
|
108
117
|
|
|
109
118
|
The library intentionally keeps `TrackEvent` minimal — use `nativeEvent` and `targetElement` to extract any DOM information you need, and `fiber.props` to access rich, typed data from React components (avoiding the `[object Object]` problem of HTML `data-*` attributes).
|
|
110
119
|
|
|
111
|
-
## Event Categories
|
|
112
|
-
|
|
113
|
-
| Category | Events | Behavior |
|
|
114
|
-
|----------|--------|----------|
|
|
115
|
-
| **Pointer** | `click`, `touchstart`, `touchend` | Walks DOM ancestors to find interactive element (button, link, ARIA role, React handler) |
|
|
116
|
-
| **Form** | `input`, `change`, `focus`, `blur`, `submit` | Tracks target directly, skips disabled elements |
|
|
117
|
-
| **Ambient** | `scroll`, `keydown`, `keyup`, `copy`, `paste`, `resize`, `popstate`, `hashchange` | Tracks target directly, does not skip disabled |
|
|
118
|
-
|
|
119
|
-
## How It Works
|
|
120
|
-
|
|
121
|
-
1. **DOM delegation** — attaches a single capture-phase listener per event type on `document`
|
|
122
|
-
2. **Filtering** — determines if the target (or ancestor) is interactive based on HTML semantics, ARIA roles, or React fiber props
|
|
123
|
-
3. **Fiber resolution** — finds the nearest React component and extracts its name and props
|
|
124
|
-
4. **Dispatch** — invokes all registered callbacks with the `TrackEvent`
|
|
125
|
-
|
|
126
|
-
Capture phase (`addEventListener(..., true)`) ensures events are caught even if `stopPropagation()` is called downstream.
|
|
127
|
-
|
|
128
120
|
## Development
|
|
129
121
|
|
|
130
122
|
```bash
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-global-tracking",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4-test.1",
|
|
4
4
|
"description": "Global user interaction tracking for React.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -39,6 +39,10 @@
|
|
|
39
39
|
"interaction",
|
|
40
40
|
"fiber"
|
|
41
41
|
],
|
|
42
|
+
"peerDependencies": {
|
|
43
|
+
"react": ">=16.8.0",
|
|
44
|
+
"react-dom": ">=16.8.0"
|
|
45
|
+
},
|
|
42
46
|
"devDependencies": {
|
|
43
47
|
"@changesets/cli": "^2.29.8",
|
|
44
48
|
"@vitest/coverage-v8": "^4.0.18",
|