@pelatform/ui.hook 0.2.0 → 0.2.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 +40 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/@pelatform/ui.hook)
|
|
4
4
|
[](https://opensource.org/licenses/MIT)
|
|
5
5
|
|
|
6
|
-
A collection of production-ready React hooks for the Pelatform UI Library. This package provides
|
|
6
|
+
A collection of production-ready React hooks for the Pelatform UI Library. This package provides 18 reusable hooks for analytics, responsive design, form handling, navigation, DOM management, and more.
|
|
7
7
|
|
|
8
8
|
## Installation
|
|
9
9
|
|
|
@@ -67,6 +67,37 @@ import { useViewport } from "@pelatform/ui.hook";
|
|
|
67
67
|
const [height, width] = useViewport();
|
|
68
68
|
```
|
|
69
69
|
|
|
70
|
+
#### `useIntersectionObserver`
|
|
71
|
+
|
|
72
|
+
Observe element intersection with viewport using Intersection Observer API.
|
|
73
|
+
|
|
74
|
+
```typescript
|
|
75
|
+
import { useIntersectionObserver } from "@pelatform/ui.hook";
|
|
76
|
+
|
|
77
|
+
const ref = useRef<HTMLDivElement>(null);
|
|
78
|
+
const { isIntersecting, entry } = useIntersectionObserver(ref, {
|
|
79
|
+
threshold: 0.5,
|
|
80
|
+
triggerOnce: true,
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
<div ref={ref}>
|
|
84
|
+
{isIntersecting ? "Visible!" : "Not visible"}
|
|
85
|
+
</div>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
#### `useIsMac`
|
|
89
|
+
|
|
90
|
+
Detect if the user's operating system is macOS.
|
|
91
|
+
|
|
92
|
+
```typescript
|
|
93
|
+
import { useIsMac } from "@pelatform/ui.hook";
|
|
94
|
+
|
|
95
|
+
const isMac = useIsMac();
|
|
96
|
+
|
|
97
|
+
// Useful for keyboard shortcut hints (⌘ vs Ctrl)
|
|
98
|
+
<div>Press {isMac ? "⌘" : "Ctrl"} + K to open command menu</div>
|
|
99
|
+
```
|
|
100
|
+
|
|
70
101
|
### Form & Input Management
|
|
71
102
|
|
|
72
103
|
#### `useFileUpload`
|
|
@@ -151,14 +182,14 @@ const elementScroll = useScrollPosition({ targetRef: myRef });
|
|
|
151
182
|
|
|
152
183
|
### DOM Management
|
|
153
184
|
|
|
154
|
-
#### `
|
|
185
|
+
#### `useBodyClass`
|
|
155
186
|
|
|
156
187
|
Dynamically add/remove CSS classes from the document body element.
|
|
157
188
|
|
|
158
189
|
```typescript
|
|
159
|
-
import {
|
|
190
|
+
import { useBodyClass } from "@pelatform/ui.hook";
|
|
160
191
|
|
|
161
|
-
|
|
192
|
+
useBodyClass("dark-theme overflow-hidden");
|
|
162
193
|
```
|
|
163
194
|
|
|
164
195
|
#### `useMutationObserver`
|
|
@@ -245,7 +276,8 @@ useRemoveGAParams(); // Cleans URL after GA processes linker attribution
|
|
|
245
276
|
- **Responsive Design**: `useMediaQuery`, `useIsMobile`, `useViewport`
|
|
246
277
|
- **Form Management**: `useFileUpload`, `useSliderInput`, `useCopyToClipboard`
|
|
247
278
|
- **Navigation**: `useMenu`, `useScrollPosition`
|
|
248
|
-
- **DOM Interaction**: `useMutationObserver`, `
|
|
279
|
+
- **DOM Interaction**: `useMutationObserver`, `useBodyClass`, `useIntersectionObserver`
|
|
280
|
+
- **Platform Detection**: `useIsMac`
|
|
249
281
|
- **Security**: `useRecaptchaV2`
|
|
250
282
|
- **SSR Safety**: `useMounted`, `useHydrated`, `useRemoveGAParams`
|
|
251
283
|
|
|
@@ -255,12 +287,14 @@ useRemoveGAParams(); // Cleans URL after GA processes linker attribution
|
|
|
255
287
|
|
|
256
288
|
- `useMounted`
|
|
257
289
|
- `useHydrated`
|
|
258
|
-
- `
|
|
290
|
+
- `useBodyClass`
|
|
259
291
|
- `useRemoveGAParams`
|
|
260
292
|
- `useMediaQuery`
|
|
261
293
|
- `useIsMobile`
|
|
294
|
+
- `useIsMac`
|
|
262
295
|
- `useViewport`
|
|
263
296
|
- `useScrollPosition`
|
|
297
|
+
- `useIntersectionObserver`
|
|
264
298
|
|
|
265
299
|
**Moderate** (State Management):
|
|
266
300
|
|