@usefy/usefy 0.0.20 โ 0.0.22
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 +72 -27
- package/package.json +15 -15
package/README.md
CHANGED
|
@@ -9,16 +9,16 @@
|
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
11
|
<p align="center">
|
|
12
|
-
<a href="https://www.npmjs.com/package/@usefy/usefy">
|
|
12
|
+
<a href="https://www.npmjs.com/package/@usefy/usefy" target="_blank" rel="noopener noreferrer">
|
|
13
13
|
<img src="https://img.shields.io/npm/v/@usefy/usefy.svg?style=flat-square&color=007acc" alt="npm version" />
|
|
14
14
|
</a>
|
|
15
|
-
<a href="https://www.npmjs.com/package/@usefy/usefy">
|
|
15
|
+
<a href="https://www.npmjs.com/package/@usefy/usefy" target="_blank" rel="noopener noreferrer">
|
|
16
16
|
<img src="https://img.shields.io/npm/dm/@usefy/usefy.svg?style=flat-square&color=007acc" alt="npm downloads" />
|
|
17
17
|
</a>
|
|
18
|
-
<a href="https://bundlephobia.com/package/@usefy/usefy">
|
|
18
|
+
<a href="https://bundlephobia.com/package/@usefy/usefy" target="_blank" rel="noopener noreferrer">
|
|
19
19
|
<img src="https://img.shields.io/bundlephobia/minzip/@usefy/usefy?style=flat-square&color=007acc" alt="bundle size" />
|
|
20
20
|
</a>
|
|
21
|
-
<a href="https://github.com/geon0529/usefy/blob/master/LICENSE">
|
|
21
|
+
<a href="https://github.com/geon0529/usefy/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">
|
|
22
22
|
<img src="https://img.shields.io/npm/l/@usefy/usefy.svg?style=flat-square&color=007acc" alt="license" />
|
|
23
23
|
</a>
|
|
24
24
|
</p>
|
|
@@ -30,6 +30,12 @@
|
|
|
30
30
|
<a href="#features">Features</a>
|
|
31
31
|
</p>
|
|
32
32
|
|
|
33
|
+
<p align="center">
|
|
34
|
+
<a href="https://geon0529.github.io/usefy/" target="_blank" rel="noopener noreferrer">
|
|
35
|
+
<strong>๐ View Storybook Demo</strong>
|
|
36
|
+
</a>
|
|
37
|
+
</p>
|
|
38
|
+
|
|
33
39
|
---
|
|
34
40
|
|
|
35
41
|
> โ ๏ธ **Pre-release Notice**: This project is currently in version `0.x.x` (alpha/beta stage). APIs may change between minor versions. While fully functional and tested, please use with caution in production environments.
|
|
@@ -50,6 +56,7 @@
|
|
|
50
56
|
- **โก SSR Compatible** โ Works seamlessly with Next.js, Remix, and other SSR frameworks
|
|
51
57
|
- **๐งช Well Tested** โ High test coverage ensures reliability and stability
|
|
52
58
|
- **๐ Well Documented** โ Detailed documentation with practical examples
|
|
59
|
+
- **๐จ Interactive Demos** โ Try all hooks in action with our Storybook playground
|
|
53
60
|
|
|
54
61
|
---
|
|
55
62
|
|
|
@@ -100,21 +107,22 @@ All packages require React 18 or 19:
|
|
|
100
107
|
|
|
101
108
|
### ๐ฆ Available Hooks
|
|
102
109
|
|
|
103
|
-
| Hook
|
|
104
|
-
|
|
|
105
|
-
|
|
|
106
|
-
|
|
|
107
|
-
|
|
|
108
|
-
|
|
|
109
|
-
|
|
|
110
|
-
|
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
|
116
|
-
|
|
|
117
|
-
|
|
|
110
|
+
| Hook | Description | npm | Coverage |
|
|
111
|
+
| ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
|
|
112
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-toggle" target="_blank" rel="noopener noreferrer">@usefy/use-toggle</a> | Boolean state management with toggle, setTrue, setFalse | <a href="https://www.npmjs.com/package/@usefy/use-toggle" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-toggle.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
113
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-counter" target="_blank" rel="noopener noreferrer">@usefy/use-counter</a> | Counter state with increment, decrement, reset | <a href="https://www.npmjs.com/package/@usefy/use-counter" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-counter.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
114
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-debounce" target="_blank" rel="noopener noreferrer">@usefy/use-debounce</a> | Value debouncing with leading/trailing edge | <a href="https://www.npmjs.com/package/@usefy/use-debounce" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-debounce.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
115
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-debounce-callback" target="_blank" rel="noopener noreferrer">@usefy/use-debounce-callback</a> | Debounced callbacks with cancel/flush/pending | <a href="https://www.npmjs.com/package/@usefy/use-debounce-callback" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-debounce-callback.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
116
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-throttle" target="_blank" rel="noopener noreferrer">@usefy/use-throttle</a> | Value throttling for rate-limiting updates | <a href="https://www.npmjs.com/package/@usefy/use-throttle" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-throttle.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
117
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-throttle-callback" target="_blank" rel="noopener noreferrer">@usefy/use-throttle-callback</a> | Throttled callbacks with cancel/flush/pending | <a href="https://www.npmjs.com/package/@usefy/use-throttle-callback" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-throttle-callback.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
118
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-local-storage" target="_blank" rel="noopener noreferrer">@usefy/use-local-storage</a> | localStorage persistence with cross-tab sync | <a href="https://www.npmjs.com/package/@usefy/use-local-storage" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-local-storage.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
119
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-session-storage" target="_blank" rel="noopener noreferrer">@usefy/use-session-storage</a> | sessionStorage persistence for tab lifetime | <a href="https://www.npmjs.com/package/@usefy/use-session-storage" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-session-storage.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
120
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-click-any-where" target="_blank" rel="noopener noreferrer">@usefy/use-click-any-where</a> | Document-wide click event detection | <a href="https://www.npmjs.com/package/@usefy/use-click-any-where" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-click-any-where.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
121
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-copy-to-clipboard" target="_blank" rel="noopener noreferrer">@usefy/use-copy-to-clipboard</a> | Clipboard copy with fallback support | <a href="https://www.npmjs.com/package/@usefy/use-copy-to-clipboard" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-copy-to-clipboard.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
122
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-event-listener" target="_blank" rel="noopener noreferrer">@usefy/use-event-listener</a> | DOM event listener with auto cleanup | <a href="https://www.npmjs.com/package/@usefy/use-event-listener" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-event-listener.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
123
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-on-click-outside" target="_blank" rel="noopener noreferrer">@usefy/use-on-click-outside</a> | Outside click detection for modals/dropdowns | <a href="https://www.npmjs.com/package/@usefy/use-on-click-outside" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-on-click-outside.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
124
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-unmount" target="_blank" rel="noopener noreferrer">@usefy/use-unmount</a> | Execute callback on component unmount | <a href="https://www.npmjs.com/package/@usefy/use-unmount" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-unmount.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
125
|
+
| <a href="https://www.npmjs.com/package/@usefy/use-timer" target="_blank" rel="noopener noreferrer">@usefy/use-timer</a> | Countdown timer with drift compensation and formats | <a href="https://www.npmjs.com/package/@usefy/use-timer" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-timer.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
118
126
|
|
|
119
127
|
---
|
|
120
128
|
|
|
@@ -131,6 +139,7 @@ import {
|
|
|
131
139
|
useCopyToClipboard,
|
|
132
140
|
useEventListener,
|
|
133
141
|
useOnClickOutside,
|
|
142
|
+
useUnmount,
|
|
134
143
|
} from "@usefy/usefy";
|
|
135
144
|
|
|
136
145
|
function App() {
|
|
@@ -453,26 +462,62 @@ Modern Clipboard API with automatic fallback for older browsers.
|
|
|
453
462
|
|
|
454
463
|
</details>
|
|
455
464
|
|
|
465
|
+
### ๐ Lifecycle
|
|
466
|
+
|
|
467
|
+
<details>
|
|
468
|
+
<summary><strong>useUnmount</strong> โ Execute callback on component unmount</summary>
|
|
469
|
+
|
|
470
|
+
```tsx
|
|
471
|
+
// Basic usage
|
|
472
|
+
useUnmount(() => {
|
|
473
|
+
console.log("Component unmounted");
|
|
474
|
+
});
|
|
475
|
+
|
|
476
|
+
// With latest state access
|
|
477
|
+
const [formData, setFormData] = useState({});
|
|
478
|
+
useUnmount(() => {
|
|
479
|
+
// Always accesses latest formData value
|
|
480
|
+
saveToLocalStorage(formData);
|
|
481
|
+
});
|
|
482
|
+
|
|
483
|
+
// Conditional cleanup
|
|
484
|
+
useUnmount(
|
|
485
|
+
() => {
|
|
486
|
+
sendAnalyticsEvent("component_unmounted");
|
|
487
|
+
},
|
|
488
|
+
{ enabled: trackingEnabled }
|
|
489
|
+
);
|
|
490
|
+
```
|
|
491
|
+
|
|
492
|
+
Perfect for saving data, sending analytics, and cleaning up resources on component removal.
|
|
493
|
+
|
|
494
|
+
</details>
|
|
495
|
+
|
|
456
496
|
---
|
|
457
497
|
|
|
458
498
|
## Test Coverage
|
|
459
499
|
|
|
460
500
|
All packages are comprehensively tested using Vitest to ensure reliability and stability.
|
|
461
501
|
|
|
502
|
+
๐ <a href="https://geon0529.github.io/usefy/coverage/" target="_blank" rel="noopener noreferrer"><strong>View Detailed Coverage Report</strong></a> (GitHub Pages)
|
|
503
|
+
|
|
504
|
+
> ๐ก To generate coverage report locally, run `pnpm test:coverage`. The report will be available at `coverage/index.html`.
|
|
505
|
+
|
|
462
506
|
| Package | Statements | Branches | Functions | Lines |
|
|
463
507
|
| --------------------- | ---------- | -------- | --------- | ----- |
|
|
464
508
|
| use-toggle | 100% | 100% | 100% | 100% |
|
|
465
509
|
| use-counter | 100% | 100% | 100% | 100% |
|
|
466
510
|
| use-throttle | 100% | 100% | 100% | 100% |
|
|
467
511
|
| use-throttle-callback | 100% | 100% | 100% | 100% |
|
|
468
|
-
| use-local-storage | 95% | 86% |
|
|
469
|
-
| use-session-storage | 94% |
|
|
512
|
+
| use-local-storage | 95% | 86% | 93% | 95% |
|
|
513
|
+
| use-session-storage | 94% | 82% | 93% | 94% |
|
|
470
514
|
| use-debounce-callback | 94% | 83% | 94% | 94% |
|
|
471
515
|
| use-click-any-where | 92% | 88% | 100% | 92% |
|
|
472
516
|
| use-debounce | 91% | 90% | 67% | 93% |
|
|
473
517
|
| use-copy-to-clipboard | 88% | 79% | 86% | 88% |
|
|
474
518
|
| use-event-listener | 96% | 91% | 100% | 96% |
|
|
475
519
|
| use-on-click-outside | 97% | 93% | 100% | 97% |
|
|
520
|
+
| use-unmount | 100% | 100% | 100% | 100% |
|
|
476
521
|
| use-timer | 84% | 73% | 94% | 84% |
|
|
477
522
|
|
|
478
523
|
---
|
|
@@ -491,16 +536,16 @@ All packages are comprehensively tested using Vitest to ensure reliability and s
|
|
|
491
536
|
|
|
492
537
|
## Related Links
|
|
493
538
|
|
|
494
|
-
- ๐ฆ
|
|
495
|
-
- ๐
|
|
496
|
-
- ๐
|
|
497
|
-
- ๐
|
|
539
|
+
- ๐ฆ <a href="https://www.npmjs.com/org/usefy" target="_blank" rel="noopener noreferrer">npm Organization</a>
|
|
540
|
+
- ๐ <a href="https://github.com/geon0529/usefy" target="_blank" rel="noopener noreferrer">GitHub Repository</a>
|
|
541
|
+
- ๐ <a href="https://github.com/geon0529/usefy/blob/master/packages/usefy/CHANGELOG.md" target="_blank" rel="noopener noreferrer">Changelog</a>
|
|
542
|
+
- ๐ <a href="https://github.com/geon0529/usefy/issues" target="_blank" rel="noopener noreferrer">Issue Tracker</a>
|
|
498
543
|
|
|
499
544
|
---
|
|
500
545
|
|
|
501
546
|
## License
|
|
502
547
|
|
|
503
|
-
MIT ยฉ
|
|
548
|
+
MIT ยฉ <a href="https://github.com/geon0529" target="_blank" rel="noopener noreferrer">mirunamu</a>
|
|
504
549
|
|
|
505
550
|
---
|
|
506
551
|
|
|
@@ -509,7 +554,7 @@ MIT ยฉ [mirunamu](https://github.com/geon0529)
|
|
|
509
554
|
</p>
|
|
510
555
|
|
|
511
556
|
<p align="center">
|
|
512
|
-
<a href="https://github.com/geon0529/usefy">
|
|
557
|
+
<a href="https://github.com/geon0529/usefy" target="_blank" rel="noopener noreferrer">
|
|
513
558
|
<img src="https://img.shields.io/github/stars/geon0529/usefy?style=social" alt="GitHub stars" />
|
|
514
559
|
</a>
|
|
515
560
|
</p>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@usefy/usefy",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.22",
|
|
4
4
|
"description": "A collection of useful React hooks",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -17,20 +17,20 @@
|
|
|
17
17
|
],
|
|
18
18
|
"sideEffects": false,
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@usefy/use-click-any-where": "0.0.
|
|
21
|
-
"@usefy/use-copy-to-clipboard": "0.0.
|
|
22
|
-
"@usefy/use-counter": "0.0.
|
|
23
|
-
"@usefy/use-toggle": "0.0.
|
|
24
|
-
"@usefy/use-debounce": "0.0.
|
|
25
|
-
"@usefy/use-debounce-callback": "0.0.
|
|
26
|
-
"@usefy/use-throttle": "0.0.
|
|
27
|
-
"@usefy/use-throttle-callback": "0.0.
|
|
28
|
-
"@usefy/use-local-storage": "0.0.
|
|
29
|
-
"@usefy/use-session-storage": "0.0.
|
|
30
|
-
"@usefy/use-on-click-outside": "0.0.
|
|
31
|
-
"@usefy/use-event-listener": "0.0.
|
|
32
|
-
"@usefy/use-timer": "0.0.
|
|
33
|
-
"@usefy/use-unmount": "0.0.
|
|
20
|
+
"@usefy/use-click-any-where": "0.0.22",
|
|
21
|
+
"@usefy/use-copy-to-clipboard": "0.0.22",
|
|
22
|
+
"@usefy/use-counter": "0.0.22",
|
|
23
|
+
"@usefy/use-toggle": "0.0.22",
|
|
24
|
+
"@usefy/use-debounce": "0.0.22",
|
|
25
|
+
"@usefy/use-debounce-callback": "0.0.22",
|
|
26
|
+
"@usefy/use-throttle": "0.0.22",
|
|
27
|
+
"@usefy/use-throttle-callback": "0.0.22",
|
|
28
|
+
"@usefy/use-local-storage": "0.0.22",
|
|
29
|
+
"@usefy/use-session-storage": "0.0.22",
|
|
30
|
+
"@usefy/use-on-click-outside": "0.0.22",
|
|
31
|
+
"@usefy/use-event-listener": "0.0.22",
|
|
32
|
+
"@usefy/use-timer": "0.0.22",
|
|
33
|
+
"@usefy/use-unmount": "0.0.22"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": "^18.0.0 || ^19.0.0"
|