use-good-hooks 1.0.7 → 1.0.9
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 +12 -12
- package/dist/index.d.ts +12 -48
- package/package.json +1 -5
package/README.md
CHANGED
|
@@ -35,7 +35,7 @@ Debounces value changes to prevent rapid updates. Useful for search inputs, form
|
|
|
35
35
|
```typescript
|
|
36
36
|
import { useDebounce } from 'use-good-hooks';
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
const SearchComponent = () => {
|
|
39
39
|
const [searchTerm, setSearchTerm] = useState('');
|
|
40
40
|
const debouncedSearchTerm = useDebounce(searchTerm, 500); // 500ms delay
|
|
41
41
|
|
|
@@ -54,7 +54,7 @@ function SearchComponent() {
|
|
|
54
54
|
placeholder="Search..."
|
|
55
55
|
/>
|
|
56
56
|
);
|
|
57
|
-
}
|
|
57
|
+
};
|
|
58
58
|
```
|
|
59
59
|
|
|
60
60
|
#### Parameters
|
|
@@ -73,7 +73,7 @@ Limits the rate at which a value can update. Useful for scroll events, window re
|
|
|
73
73
|
```typescript
|
|
74
74
|
import { useThrottle } from 'use-good-hooks';
|
|
75
75
|
|
|
76
|
-
|
|
76
|
+
const ScrollTracker = () => {
|
|
77
77
|
const [scrollY, setScrollY] = useState(0);
|
|
78
78
|
const throttledScrollY = useThrottle(scrollY, 200); // 200ms throttle
|
|
79
79
|
|
|
@@ -87,7 +87,7 @@ function ScrollTracker() {
|
|
|
87
87
|
}, []);
|
|
88
88
|
|
|
89
89
|
return <div>Throttled scroll position: {throttledScrollY}px</div>;
|
|
90
|
-
}
|
|
90
|
+
};
|
|
91
91
|
```
|
|
92
92
|
|
|
93
93
|
#### Parameters
|
|
@@ -106,7 +106,7 @@ Captures the previous value of a state or prop. Useful for comparing changes bet
|
|
|
106
106
|
```typescript
|
|
107
107
|
import { usePrev } from 'use-good-hooks';
|
|
108
108
|
|
|
109
|
-
|
|
109
|
+
const Counter = ({ count }) => {
|
|
110
110
|
const prevCount = usePrev(count);
|
|
111
111
|
|
|
112
112
|
return (
|
|
@@ -116,7 +116,7 @@ function Counter({ count }) {
|
|
|
116
116
|
<p>Direction: {count > prevCount ? 'Increasing' : count < prevCount ? 'Decreasing' : 'No change'}</p>
|
|
117
117
|
</div>
|
|
118
118
|
);
|
|
119
|
-
}
|
|
119
|
+
};
|
|
120
120
|
```
|
|
121
121
|
|
|
122
122
|
#### Parameters
|
|
@@ -134,7 +134,7 @@ Detects distinct changes in values with support for deep comparison and custom e
|
|
|
134
134
|
```typescript
|
|
135
135
|
import { useDistinct } from 'use-good-hooks';
|
|
136
136
|
|
|
137
|
-
|
|
137
|
+
const UserProfileForm = ({ user }) => {
|
|
138
138
|
const { distinct, value, prevValue } = useDistinct(user, { deep: true });
|
|
139
139
|
|
|
140
140
|
useEffect(() => {
|
|
@@ -151,7 +151,7 @@ function UserProfileForm({ user }) {
|
|
|
151
151
|
{/* Form inputs */}
|
|
152
152
|
</div>
|
|
153
153
|
);
|
|
154
|
-
}
|
|
154
|
+
};
|
|
155
155
|
```
|
|
156
156
|
|
|
157
157
|
#### Parameters
|
|
@@ -176,7 +176,7 @@ Persists state to localStorage or sessionStorage with automatic serialization/de
|
|
|
176
176
|
```typescript
|
|
177
177
|
import { useStorageState } from 'use-good-hooks';
|
|
178
178
|
|
|
179
|
-
|
|
179
|
+
const ThemePreferences = () => {
|
|
180
180
|
const [preferences, setPreferences, { removeKey }] = useStorageState('theme-prefs', {
|
|
181
181
|
darkMode: false,
|
|
182
182
|
fontSize: 'medium',
|
|
@@ -198,7 +198,7 @@ function ThemePreferences() {
|
|
|
198
198
|
<button onClick={removeKey}>Reset to Defaults</button>
|
|
199
199
|
</div>
|
|
200
200
|
);
|
|
201
|
-
}
|
|
201
|
+
};
|
|
202
202
|
```
|
|
203
203
|
|
|
204
204
|
#### Parameters
|
|
@@ -227,7 +227,7 @@ Synchronizes state with URL query parameters. Great for shareable UI states, fil
|
|
|
227
227
|
```typescript
|
|
228
228
|
import { useUrlState } from 'use-good-hooks';
|
|
229
229
|
|
|
230
|
-
|
|
230
|
+
const ProductFilter = () => {
|
|
231
231
|
const [filters, setFilters] = useUrlState({
|
|
232
232
|
category: '',
|
|
233
233
|
minPrice: 0,
|
|
@@ -252,7 +252,7 @@ function ProductFilter() {
|
|
|
252
252
|
{/* More filter controls */}
|
|
253
253
|
</div>
|
|
254
254
|
);
|
|
255
|
-
}
|
|
255
|
+
};
|
|
256
256
|
```
|
|
257
257
|
|
|
258
258
|
#### Parameters
|
package/dist/index.d.ts
CHANGED
|
@@ -1,56 +1,20 @@
|
|
|
1
|
-
|
|
1
|
+
import { default as useDebounce } from './hooks/use-debounce';
|
|
2
|
+
import { default as useDistinct } from './hooks/use-distinct';
|
|
3
|
+
import { default as usePrev } from './hooks/use-prev';
|
|
4
|
+
import { default as useStorageState } from './hooks/use-storage-state';
|
|
5
|
+
import { default as useThrottle } from './hooks/use-throttle';
|
|
6
|
+
import { default as useUrlState } from './hooks/use-url-state';
|
|
2
7
|
|
|
3
|
-
|
|
8
|
+
export { useDebounce }
|
|
4
9
|
|
|
5
|
-
|
|
6
|
-
[key: string]: any;
|
|
7
|
-
} & {
|
|
8
|
-
length?: never;
|
|
9
|
-
};
|
|
10
|
+
export { useDistinct }
|
|
10
11
|
|
|
11
|
-
export
|
|
12
|
+
export { usePrev }
|
|
12
13
|
|
|
13
|
-
export
|
|
14
|
+
export { useStorageState }
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
compare?: (a: any, b: any) => boolean;
|
|
17
|
-
debounce?: number;
|
|
18
|
-
deep?: boolean;
|
|
19
|
-
};
|
|
16
|
+
export { useThrottle }
|
|
20
17
|
|
|
21
|
-
|
|
22
|
-
distinct: boolean;
|
|
23
|
-
prevValue: T | undefined;
|
|
24
|
-
value: T;
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
export declare const usePrev: <T>(value: T) => T | undefined;
|
|
28
|
-
|
|
29
|
-
export declare const useStorageState: <T extends StrictObject>(key: string, initialState: T, options?: UseStorageStateOptions) => [T, (value: T | ((prev: T) => T)) => void, {
|
|
30
|
-
removeKey: () => void;
|
|
31
|
-
}];
|
|
32
|
-
|
|
33
|
-
declare type UseStorageStateOptions = {
|
|
34
|
-
debounce?: number;
|
|
35
|
-
onError?: (err: Error) => void;
|
|
36
|
-
omitKeys?: string[] | ((value: any, key: string) => boolean);
|
|
37
|
-
pickKeys?: string[] | ((value: any, key: string) => boolean);
|
|
38
|
-
storage?: StorageType;
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
export declare const useThrottle: <T>(value: T, delay?: number) => T;
|
|
42
|
-
|
|
43
|
-
export declare const useUrlState: <T extends StrictObject>(initialState: T, options: UseUrlStateOptions) => [T, (value: SetUrlStateAction<T>) => void];
|
|
44
|
-
|
|
45
|
-
declare type UseUrlStateOptions = {
|
|
46
|
-
debounce?: number;
|
|
47
|
-
kebabCase?: boolean;
|
|
48
|
-
omitKeys?: string[] | ((value: any, key: string) => boolean);
|
|
49
|
-
omitValues?: any[] | ((value: any, key: string) => boolean);
|
|
50
|
-
onError?: (err: Error) => void;
|
|
51
|
-
pickKeys?: string[] | ((value: any, key: string) => boolean);
|
|
52
|
-
prefix?: string;
|
|
53
|
-
url: URL;
|
|
54
|
-
};
|
|
18
|
+
export { useUrlState }
|
|
55
19
|
|
|
56
20
|
export { }
|
package/package.json
CHANGED
|
@@ -34,7 +34,6 @@
|
|
|
34
34
|
"dist"
|
|
35
35
|
],
|
|
36
36
|
"main": "./dist/index.js",
|
|
37
|
-
"module": "./dist/index.js",
|
|
38
37
|
"peerDependencies": {
|
|
39
38
|
"lodash": "^4.17.21",
|
|
40
39
|
"react": "^19.0.0",
|
|
@@ -42,12 +41,9 @@
|
|
|
42
41
|
},
|
|
43
42
|
"scripts": {
|
|
44
43
|
"build": "yarn lint && vite build --mode export",
|
|
45
|
-
"dev": "vite",
|
|
46
44
|
"lint": "prettier --write . && eslint .",
|
|
47
45
|
"npm-publish": "yarn test --run && yarn build && yarn version --patch --no-git-tag-version && yarn publish --non-interactive",
|
|
48
46
|
"test": "vitest"
|
|
49
47
|
},
|
|
50
|
-
"
|
|
51
|
-
"types": "./dist/index.d.ts",
|
|
52
|
-
"version": "1.0.7"
|
|
48
|
+
"version": "1.0.9"
|
|
53
49
|
}
|