@usefy/usefy 0.0.24 → 0.0.26
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 +73 -30
- package/package.json +17 -17
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img src="https://raw.githubusercontent.com/
|
|
2
|
+
<img src="https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png" alt="usefy logo" width="180" />
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
<h1 align="center">usefy</h1>
|
|
@@ -18,7 +18,7 @@
|
|
|
18
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/
|
|
21
|
+
<a href="https://github.com/mirunamu00/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>
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
</p>
|
|
32
32
|
|
|
33
33
|
<p align="center">
|
|
34
|
-
<a href="https://
|
|
34
|
+
<a href="https://mirunamu00.github.io/usefy/" target="_blank" rel="noopener noreferrer">
|
|
35
35
|
<strong>📚 View Storybook Demo</strong>
|
|
36
36
|
</a>
|
|
37
37
|
</p>
|
|
@@ -111,17 +111,18 @@ All packages require React 18 or 19:
|
|
|
111
111
|
| ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
|
|
112
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
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
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
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
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
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
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
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
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-init" target="_blank" rel="noopener noreferrer">@usefy/use-init</a> | One-time initialization with async, retry, timeout | <a href="https://www.npmjs.com/package/@usefy/use-init" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/@usefy/use-init.svg?style=flat-square&color=007acc" alt="npm version" /></a> |  |
|
|
125
126
|
| <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> |  |
|
|
126
127
|
|
|
127
128
|
---
|
|
@@ -140,6 +141,7 @@ import {
|
|
|
140
141
|
useEventListener,
|
|
141
142
|
useOnClickOutside,
|
|
142
143
|
useUnmount,
|
|
144
|
+
useInit,
|
|
143
145
|
} from "@usefy/usefy";
|
|
144
146
|
|
|
145
147
|
function App() {
|
|
@@ -493,32 +495,73 @@ Perfect for saving data, sending analytics, and cleaning up resources on compone
|
|
|
493
495
|
|
|
494
496
|
</details>
|
|
495
497
|
|
|
498
|
+
<details>
|
|
499
|
+
<summary><strong>useInit</strong> — One-time initialization with async support, retry, timeout, and conditional execution</summary>
|
|
500
|
+
|
|
501
|
+
```tsx
|
|
502
|
+
// Basic async initialization
|
|
503
|
+
const { isInitialized, isInitializing, error } = useInit(async () => {
|
|
504
|
+
await loadConfiguration();
|
|
505
|
+
});
|
|
506
|
+
|
|
507
|
+
// With retry and timeout
|
|
508
|
+
const { error, reinitialize } = useInit(
|
|
509
|
+
async () => {
|
|
510
|
+
await connectToServer();
|
|
511
|
+
},
|
|
512
|
+
{
|
|
513
|
+
retry: 3,
|
|
514
|
+
retryDelay: 1000,
|
|
515
|
+
timeout: 5000,
|
|
516
|
+
}
|
|
517
|
+
);
|
|
518
|
+
|
|
519
|
+
// Conditional initialization
|
|
520
|
+
useInit(
|
|
521
|
+
() => {
|
|
522
|
+
initializeFeature();
|
|
523
|
+
},
|
|
524
|
+
{ when: isEnabled }
|
|
525
|
+
);
|
|
526
|
+
|
|
527
|
+
// With cleanup function
|
|
528
|
+
useInit(() => {
|
|
529
|
+
const subscription = eventBus.subscribe();
|
|
530
|
+
return () => subscription.unsubscribe();
|
|
531
|
+
});
|
|
532
|
+
```
|
|
533
|
+
|
|
534
|
+
Perfect for initializing services, loading configuration, setting up subscriptions, and any one-time setup tasks with robust error handling.
|
|
535
|
+
|
|
536
|
+
</details>
|
|
537
|
+
|
|
496
538
|
---
|
|
497
539
|
|
|
498
540
|
## Test Coverage
|
|
499
541
|
|
|
500
542
|
All packages are comprehensively tested using Vitest to ensure reliability and stability.
|
|
501
543
|
|
|
502
|
-
📊 <a href="https://
|
|
544
|
+
📊 <a href="https://mirunamu00.github.io/usefy/coverage/" target="_blank" rel="noopener noreferrer"><strong>View Detailed Coverage Report</strong></a> (GitHub Pages)
|
|
503
545
|
|
|
504
546
|
> 💡 To generate coverage report locally, run `pnpm test:coverage`. The report will be available at `coverage/index.html`.
|
|
505
547
|
|
|
506
|
-
| Package | Statements | Branches | Functions | Lines
|
|
507
|
-
| --------------------- | ---------- | -------- | --------- |
|
|
508
|
-
| use-toggle | 100% | 100% | 100% | 100%
|
|
509
|
-
| use-counter | 100% | 100% | 100% | 100%
|
|
510
|
-
| use-throttle | 100% | 100% | 100% | 100%
|
|
511
|
-
| use-throttle-callback | 100% | 100% | 100% | 100%
|
|
512
|
-
| use-
|
|
513
|
-
| use-
|
|
514
|
-
| use-
|
|
515
|
-
| use-
|
|
516
|
-
| use-
|
|
517
|
-
| use-
|
|
518
|
-
| use-
|
|
519
|
-
| use-
|
|
520
|
-
| use-
|
|
521
|
-
| use-
|
|
548
|
+
| Package | Statements | Branches | Functions | Lines |
|
|
549
|
+
| --------------------- | ---------- | -------- | --------- | ------ |
|
|
550
|
+
| use-toggle | 100% | 100% | 100% | 100% |
|
|
551
|
+
| use-counter | 100% | 100% | 100% | 100% |
|
|
552
|
+
| use-throttle | 100% | 100% | 100% | 100% |
|
|
553
|
+
| use-throttle-callback | 100% | 100% | 100% | 100% |
|
|
554
|
+
| use-on-click-outside | 97.61% | 93.93% | 100% | 97.61% |
|
|
555
|
+
| use-event-listener | 96.29% | 91.66% | 100% | 96.29% |
|
|
556
|
+
| use-init | 96.1% | 88.63% | 100% | 96% |
|
|
557
|
+
| use-local-storage | 95.18% | 86.84% | 93.75% | 95.12% |
|
|
558
|
+
| use-session-storage | 94.66% | 82.75% | 93.33% | 94.59% |
|
|
559
|
+
| use-debounce-callback | 93.2% | 76% | 93.75% | 93.13% |
|
|
560
|
+
| use-click-any-where | 92.3% | 87.5% | 100% | 92.3% |
|
|
561
|
+
| use-debounce | 90% | 82.6% | 66.66% | 91.95% |
|
|
562
|
+
| use-copy-to-clipboard | 87.87% | 79.16% | 85.71% | 87.87% |
|
|
563
|
+
| use-unmount | 100% | 100% | 100% | 100% |
|
|
564
|
+
| use-timer | 83.8% | 72.63% | 93.93% | 84.13% |
|
|
522
565
|
|
|
523
566
|
---
|
|
524
567
|
|
|
@@ -537,15 +580,15 @@ All packages are comprehensively tested using Vitest to ensure reliability and s
|
|
|
537
580
|
## Related Links
|
|
538
581
|
|
|
539
582
|
- 📦 <a href="https://www.npmjs.com/org/usefy" target="_blank" rel="noopener noreferrer">npm Organization</a>
|
|
540
|
-
- 🐙 <a href="https://github.com/
|
|
541
|
-
- 📝 <a href="https://github.com/
|
|
542
|
-
- 🐛 <a href="https://github.com/
|
|
583
|
+
- 🐙 <a href="https://github.com/mirunamu00/usefy" target="_blank" rel="noopener noreferrer">GitHub Repository</a>
|
|
584
|
+
- 📝 <a href="https://github.com/mirunamu00/usefy/blob/master/packages/usefy/CHANGELOG.md" target="_blank" rel="noopener noreferrer">Changelog</a>
|
|
585
|
+
- 🐛 <a href="https://github.com/mirunamu00/usefy/issues" target="_blank" rel="noopener noreferrer">Issue Tracker</a>
|
|
543
586
|
|
|
544
587
|
---
|
|
545
588
|
|
|
546
589
|
## License
|
|
547
590
|
|
|
548
|
-
MIT © <a href="https://github.com/
|
|
591
|
+
MIT © <a href="https://github.com/mirunamu00" target="_blank" rel="noopener noreferrer">mirunamu</a>
|
|
549
592
|
|
|
550
593
|
---
|
|
551
594
|
|
|
@@ -554,7 +597,7 @@ MIT © <a href="https://github.com/geon0529" target="_blank" rel="noopener noref
|
|
|
554
597
|
</p>
|
|
555
598
|
|
|
556
599
|
<p align="center">
|
|
557
|
-
<a href="https://github.com/
|
|
558
|
-
<img src="https://img.shields.io/github/stars/
|
|
600
|
+
<a href="https://github.com/mirunamu00/usefy" target="_blank" rel="noopener noreferrer">
|
|
601
|
+
<img src="https://img.shields.io/github/stars/mirunamu00/usefy?style=social" alt="GitHub stars" />
|
|
559
602
|
</a>
|
|
560
603
|
</p>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@usefy/usefy",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.26",
|
|
4
4
|
"description": "A collection of useful React hooks",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -17,21 +17,21 @@
|
|
|
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-
|
|
24
|
-
"@usefy/use-
|
|
25
|
-
"@usefy/use-
|
|
26
|
-
"@usefy/use-throttle": "0.0.
|
|
27
|
-
"@usefy/use-
|
|
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.
|
|
34
|
-
"@usefy/use-init": "0.0.
|
|
20
|
+
"@usefy/use-click-any-where": "0.0.26",
|
|
21
|
+
"@usefy/use-copy-to-clipboard": "0.0.26",
|
|
22
|
+
"@usefy/use-counter": "0.0.26",
|
|
23
|
+
"@usefy/use-toggle": "0.0.26",
|
|
24
|
+
"@usefy/use-debounce-callback": "0.0.26",
|
|
25
|
+
"@usefy/use-throttle": "0.0.26",
|
|
26
|
+
"@usefy/use-throttle-callback": "0.0.26",
|
|
27
|
+
"@usefy/use-debounce": "0.0.26",
|
|
28
|
+
"@usefy/use-local-storage": "0.0.26",
|
|
29
|
+
"@usefy/use-session-storage": "0.0.26",
|
|
30
|
+
"@usefy/use-on-click-outside": "0.0.26",
|
|
31
|
+
"@usefy/use-event-listener": "0.0.26",
|
|
32
|
+
"@usefy/use-timer": "0.0.26",
|
|
33
|
+
"@usefy/use-unmount": "0.0.26",
|
|
34
|
+
"@usefy/use-init": "0.0.26"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"react": "^18.0.0 || ^19.0.0"
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
},
|
|
48
48
|
"repository": {
|
|
49
49
|
"type": "git",
|
|
50
|
-
"url": "https://github.com/
|
|
50
|
+
"url": "https://github.com/mirunamu00/usefy.git",
|
|
51
51
|
"directory": "packages/usefy"
|
|
52
52
|
},
|
|
53
53
|
"license": "MIT",
|