react-hook-toolkit 1.0.4 → 1.0.6
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 +80 -58
- package/dist/hooks/hooksComp.d.ts +1 -1
- package/dist/hooks/hooksComp.js +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
|
|
2
2
|
**react-hook-toolkit** package offers a comprehensive set of hooks to simplify React development. It includes hooks for managing state, handling API requests, optimizing performance, and improving user interactions. Key features include data fetching, form handling, local storage management, debouncing/throttling, window size tracking, event listeners, and more. These hooks are designed to enhance productivity by providing reusable, easy-to-use solutions for common tasks.
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
**Note : This package is written in TypeScript and offers full support for all modern browsers.**
|
|
5
|
+
|
|
6
|
+
### Installation
|
|
5
7
|
|
|
6
8
|
Install the package:
|
|
7
9
|
|
|
@@ -13,11 +15,17 @@ yarn add react-hook-toolkit
|
|
|
13
15
|
pnpm add react-hook-toolkit
|
|
14
16
|
```
|
|
15
17
|
|
|
18
|
+
### **Browser Support**
|
|
19
|
+
|
|
20
|
+
|  |  |  |  | 
|
|
21
|
+
| ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
|
|
22
|
+
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
|
|
23
|
+
|
|
16
24
|
## Features
|
|
17
25
|
Here's the properly structured documentation with clear purpose explanations:
|
|
18
26
|
|
|
19
|
-
|
|
20
|
-
|
|
27
|
+
--------------------------------------- **HOOKS** --------------------------------------------
|
|
28
|
+
📌 **useAxios**
|
|
21
29
|
A custom hook for making API requests using Axios. It manages request states (`loading`, `error`, `data`) and provides a function (`makeRequest`) to initiate a request.
|
|
22
30
|
```ts
|
|
23
31
|
const { data, loading, error, makeRequest, cancelRequest } = useAxios({ baseURL: '/api' });
|
|
@@ -29,7 +37,7 @@ useEffect(() => {
|
|
|
29
37
|
|
|
30
38
|
---
|
|
31
39
|
|
|
32
|
-
|
|
40
|
+
📌 **useAdvReducer**
|
|
33
41
|
A custom reducer function that takes an `initialState` and an object of actions, returning a new state based on the action type.
|
|
34
42
|
|
|
35
43
|
```ts
|
|
@@ -41,7 +49,7 @@ const [state, dispatch] = useReducer(reducer, initialState);
|
|
|
41
49
|
|
|
42
50
|
---
|
|
43
51
|
|
|
44
|
-
|
|
52
|
+
📌 **useFetch**
|
|
45
53
|
Fetches data from a given URL and manages the loading, error, and data states.
|
|
46
54
|
|
|
47
55
|
```ts
|
|
@@ -50,7 +58,7 @@ const { data, loading, error } = useFetch<User[]>('/api/users');
|
|
|
50
58
|
|
|
51
59
|
---
|
|
52
60
|
|
|
53
|
-
|
|
61
|
+
📌 **useLocalStorage**
|
|
54
62
|
A hook to persist state in `localStorage`. It initializes state from `localStorage` and updates it whenever the value changes.
|
|
55
63
|
|
|
56
64
|
```ts
|
|
@@ -59,7 +67,7 @@ const [token, setToken] = useLocalStorage('authToken', '');
|
|
|
59
67
|
|
|
60
68
|
---
|
|
61
69
|
|
|
62
|
-
|
|
70
|
+
📌 **useToggle**
|
|
63
71
|
A simple boolean toggle hook that returns a state and a function to toggle its value.
|
|
64
72
|
|
|
65
73
|
```ts
|
|
@@ -68,7 +76,7 @@ const [isOpen, toggle] = useToggle(false);
|
|
|
68
76
|
|
|
69
77
|
---
|
|
70
78
|
|
|
71
|
-
|
|
79
|
+
📌 **useDebounce**
|
|
72
80
|
Delays updating the state until after a specified delay, useful for preventing frequent updates (e.g., handling user input).
|
|
73
81
|
|
|
74
82
|
```ts
|
|
@@ -77,7 +85,7 @@ const debouncedSearch = useDebounce(searchText, 500);
|
|
|
77
85
|
|
|
78
86
|
---
|
|
79
87
|
|
|
80
|
-
|
|
88
|
+
📌 **useThrottle**
|
|
81
89
|
Limits how often a value updates within a given time interval, useful for performance optimization.
|
|
82
90
|
|
|
83
91
|
```ts
|
|
@@ -86,7 +94,7 @@ const throttledScroll = useThrottle(scrollValue, 300);
|
|
|
86
94
|
|
|
87
95
|
---
|
|
88
96
|
|
|
89
|
-
|
|
97
|
+
📌 **usePrevious**
|
|
90
98
|
Returns the previous value of a state or prop.
|
|
91
99
|
|
|
92
100
|
```ts
|
|
@@ -95,7 +103,7 @@ const prevValue = usePrevious(currentValue);
|
|
|
95
103
|
|
|
96
104
|
---
|
|
97
105
|
|
|
98
|
-
|
|
106
|
+
📌 **useMediaQuery**
|
|
99
107
|
Checks if a media query matches the current viewport size and updates the state accordingly.
|
|
100
108
|
|
|
101
109
|
```ts
|
|
@@ -104,7 +112,7 @@ const isMobile = useMediaQuery('(max-width: 768px)');
|
|
|
104
112
|
|
|
105
113
|
---
|
|
106
114
|
|
|
107
|
-
|
|
115
|
+
📌 **useClipboard**
|
|
108
116
|
Copies text to the clipboard and provides a state to indicate if copying was successful.
|
|
109
117
|
|
|
110
118
|
```ts
|
|
@@ -114,7 +122,7 @@ copyToClipboard('Text to copy');
|
|
|
114
122
|
|
|
115
123
|
---
|
|
116
124
|
|
|
117
|
-
|
|
125
|
+
📌 **useInterval**
|
|
118
126
|
Runs a callback function at a specified time interval and clears it when the delay is null or the component unmounts.
|
|
119
127
|
|
|
120
128
|
```ts
|
|
@@ -125,7 +133,7 @@ useInterval(() => {
|
|
|
125
133
|
|
|
126
134
|
---
|
|
127
135
|
|
|
128
|
-
|
|
136
|
+
📌 **useWindowSize**
|
|
129
137
|
Tracks the width and height of the browser window and updates when resized.
|
|
130
138
|
|
|
131
139
|
```ts
|
|
@@ -134,7 +142,7 @@ const { width, height } = useWindowSize();
|
|
|
134
142
|
|
|
135
143
|
---
|
|
136
144
|
|
|
137
|
-
|
|
145
|
+
📌 **useKeyPress**
|
|
138
146
|
Detects whether a specific key is being pressed or released.
|
|
139
147
|
|
|
140
148
|
```ts
|
|
@@ -143,7 +151,7 @@ const isEnterPressed = useKeyPress('Enter');
|
|
|
143
151
|
|
|
144
152
|
---
|
|
145
153
|
|
|
146
|
-
|
|
154
|
+
📌 **useOnlineStatus**
|
|
147
155
|
Monitors the user's network connection status (online/offline).
|
|
148
156
|
|
|
149
157
|
```ts
|
|
@@ -152,7 +160,7 @@ const isOnline = useOnlineStatus();
|
|
|
152
160
|
|
|
153
161
|
---
|
|
154
162
|
|
|
155
|
-
|
|
163
|
+
📌 **useScrollPosition**
|
|
156
164
|
Tracks the horizontal (x) and vertical (y) scroll positions of the window.
|
|
157
165
|
|
|
158
166
|
```ts
|
|
@@ -161,7 +169,7 @@ const { x, y } = useScrollPosition();
|
|
|
161
169
|
|
|
162
170
|
---
|
|
163
171
|
|
|
164
|
-
|
|
172
|
+
📌 **useTimeout**
|
|
165
173
|
Executes a function after a specified delay and cleans up automatically when dependencies change.
|
|
166
174
|
|
|
167
175
|
```ts
|
|
@@ -172,7 +180,7 @@ useTimeout(() => {
|
|
|
172
180
|
|
|
173
181
|
---
|
|
174
182
|
|
|
175
|
-
|
|
183
|
+
📌 **useDarkMode**
|
|
176
184
|
Detects and toggles dark mode based on the user's system preference.
|
|
177
185
|
|
|
178
186
|
```ts
|
|
@@ -181,7 +189,7 @@ const [isDarkMode, toggleDarkMode] = useDarkMode();
|
|
|
181
189
|
|
|
182
190
|
---
|
|
183
191
|
|
|
184
|
-
|
|
192
|
+
📌 **useForm**
|
|
185
193
|
Manages form state, handles input changes, and performs validation using provided validators.
|
|
186
194
|
|
|
187
195
|
```ts
|
|
@@ -197,7 +205,7 @@ validate({
|
|
|
197
205
|
|
|
198
206
|
---
|
|
199
207
|
|
|
200
|
-
|
|
208
|
+
📌 **useArray**
|
|
201
209
|
Provides an array state with helper functions to manipulate it, including setting, adding, removing by index, and clearing elements.
|
|
202
210
|
|
|
203
211
|
```ts
|
|
@@ -210,7 +218,7 @@ clear(); // ➝ []
|
|
|
210
218
|
|
|
211
219
|
---
|
|
212
220
|
|
|
213
|
-
|
|
221
|
+
📌 **useStepper**
|
|
214
222
|
Manages step-based navigation by keeping track of the current step index and providing functions to move forward, backward, and reset.
|
|
215
223
|
|
|
216
224
|
```ts
|
|
@@ -223,7 +231,7 @@ handleReset(); // ➝ step 0
|
|
|
223
231
|
|
|
224
232
|
---
|
|
225
233
|
|
|
226
|
-
|
|
234
|
+
📌 **useTimeoutFn**
|
|
227
235
|
Executes a callback function after a specified delay and provides functions to reset or clear the timeout.
|
|
228
236
|
|
|
229
237
|
```ts
|
|
@@ -235,7 +243,7 @@ clear(); // ➝ clears timeout
|
|
|
235
243
|
|
|
236
244
|
---
|
|
237
245
|
|
|
238
|
-
|
|
246
|
+
📌 **useDebouncedCallback**
|
|
239
247
|
Delays the execution of a callback function until after a specified delay, resetting the delay on each call to prevent frequent execution.
|
|
240
248
|
|
|
241
249
|
```ts
|
|
@@ -246,7 +254,7 @@ input.onChange = debounced;
|
|
|
246
254
|
|
|
247
255
|
---
|
|
248
256
|
|
|
249
|
-
|
|
257
|
+
📌 **useScrollLock**
|
|
250
258
|
Locks or unlocks scrolling on the webpage when the `lock` parameter changes.
|
|
251
259
|
|
|
252
260
|
```ts
|
|
@@ -255,7 +263,7 @@ useScrollLock(true); // ➝ disables body scroll
|
|
|
255
263
|
|
|
256
264
|
---
|
|
257
265
|
|
|
258
|
-
|
|
266
|
+
📌 **useResizeObserver**
|
|
259
267
|
Observes and returns the dimensions of an HTML element using the `ResizeObserver` API.
|
|
260
268
|
|
|
261
269
|
```ts
|
|
@@ -266,7 +274,7 @@ const size = useResizeObserver(ref);
|
|
|
266
274
|
|
|
267
275
|
---
|
|
268
276
|
|
|
269
|
-
|
|
277
|
+
📌 **useMousePosition**
|
|
270
278
|
Tracks the user's mouse position in real-time and returns the coordinates.
|
|
271
279
|
|
|
272
280
|
```ts
|
|
@@ -275,7 +283,7 @@ const { x, y } = useMousePosition();
|
|
|
275
283
|
|
|
276
284
|
---
|
|
277
285
|
|
|
278
|
-
|
|
286
|
+
📌 **useScrollDirection**
|
|
279
287
|
Determines whether the user is scrolling up or down based on window scroll position changes.
|
|
280
288
|
|
|
281
289
|
```ts
|
|
@@ -284,7 +292,7 @@ const direction = useScrollDirection(); // ➝ 'up' | 'down'
|
|
|
284
292
|
|
|
285
293
|
---
|
|
286
294
|
|
|
287
|
-
|
|
295
|
+
📌 **useImageLoader**
|
|
288
296
|
Loads an image and provides `loaded` and `error` states to track its loading status.
|
|
289
297
|
|
|
290
298
|
```ts
|
|
@@ -293,7 +301,7 @@ const { loaded, error } = useImageLoader('/logo.png');
|
|
|
293
301
|
|
|
294
302
|
---
|
|
295
303
|
|
|
296
|
-
|
|
304
|
+
📌 **usePersistedState**
|
|
297
305
|
Stores and retrieves state from `localStorage` to persist data across page reloads.
|
|
298
306
|
|
|
299
307
|
```ts
|
|
@@ -302,7 +310,7 @@ const [theme, setTheme] = usePersistedState('theme', 'light');
|
|
|
302
310
|
|
|
303
311
|
---
|
|
304
312
|
|
|
305
|
-
|
|
313
|
+
📌 **useReducedMotion**
|
|
306
314
|
Detects if the user has enabled the "Reduce Motion" accessibility setting in their system preferences.
|
|
307
315
|
|
|
308
316
|
```ts
|
|
@@ -311,7 +319,7 @@ const prefersReduced = useReducedMotion(); // ➝ true | false
|
|
|
311
319
|
|
|
312
320
|
---
|
|
313
321
|
|
|
314
|
-
|
|
322
|
+
📌 **useCookie**
|
|
315
323
|
Manages cookies by providing functions to get, set, and delete a specific cookie by its key.
|
|
316
324
|
|
|
317
325
|
```ts
|
|
@@ -323,7 +331,7 @@ deleteToken();
|
|
|
323
331
|
|
|
324
332
|
---
|
|
325
333
|
|
|
326
|
-
|
|
334
|
+
📌 **useFetchRetry**
|
|
327
335
|
Performs an HTTP request with retry logic, retrying a specified number of times upon failure before returning an error.
|
|
328
336
|
|
|
329
337
|
```ts
|
|
@@ -332,7 +340,7 @@ const { data, loading, error } = useFetchRetry('/api/user', { method: 'GET' }, 3
|
|
|
332
340
|
|
|
333
341
|
---
|
|
334
342
|
|
|
335
|
-
|
|
343
|
+
📌 **useDelay**
|
|
336
344
|
Delays the update of a value for a specified amount of time before reflecting it in the state.
|
|
337
345
|
|
|
338
346
|
```ts
|
|
@@ -341,7 +349,7 @@ const delayedValue = useDelay(value, 500);
|
|
|
341
349
|
|
|
342
350
|
---
|
|
343
351
|
|
|
344
|
-
|
|
352
|
+
📌 **useVisibilityChange**
|
|
345
353
|
Tracks the visibility state of the document and returns whether the page is currently visible or hidden.
|
|
346
354
|
|
|
347
355
|
```ts
|
|
@@ -350,7 +358,7 @@ const isVisible = useVisibilityChange(); // ➝ true | false
|
|
|
350
358
|
|
|
351
359
|
---
|
|
352
360
|
|
|
353
|
-
|
|
361
|
+
📌 **useDebouncedValue**
|
|
354
362
|
Debounces a value to avoid immediate changes, returning the delayed value after a specified delay.
|
|
355
363
|
|
|
356
364
|
```ts
|
|
@@ -359,7 +367,7 @@ const debouncedSearch = useDebouncedValue(input, 300);
|
|
|
359
367
|
|
|
360
368
|
---
|
|
361
369
|
|
|
362
|
-
|
|
370
|
+
📌 **useAsync**
|
|
363
371
|
Handles the state of an asynchronous function, including loading, success, and error states, with the ability to trigger the execution of the async operation.
|
|
364
372
|
|
|
365
373
|
```ts
|
|
@@ -370,7 +378,7 @@ execute(); // ➝ runs the async function
|
|
|
370
378
|
|
|
371
379
|
---
|
|
372
380
|
|
|
373
|
-
|
|
381
|
+
📌 **useScript**
|
|
374
382
|
Dynamically loads an external script, managing its loading, ready, and error states, and optionally removes the script on unmount.
|
|
375
383
|
|
|
376
384
|
```ts
|
|
@@ -381,7 +389,7 @@ const status = useScript('https://js.stripe.com/v3');
|
|
|
381
389
|
|
|
382
390
|
---
|
|
383
391
|
|
|
384
|
-
|
|
392
|
+
📌 **useIndexedDB**
|
|
385
393
|
Fetches data from an IndexedDB store, handling errors and updating the state with the fetched data.
|
|
386
394
|
|
|
387
395
|
```ts
|
|
@@ -390,7 +398,7 @@ const { data, error } = useIndexedDB<MyType>('myDB', 'myStore');
|
|
|
390
398
|
|
|
391
399
|
---
|
|
392
400
|
|
|
393
|
-
|
|
401
|
+
📌 **useGeoLocation**
|
|
394
402
|
Retrieves the user's current geographic location and returns it along with any error encountered.
|
|
395
403
|
|
|
396
404
|
```ts
|
|
@@ -399,7 +407,7 @@ const { position, error } = useGeoLocation();
|
|
|
399
407
|
|
|
400
408
|
---
|
|
401
409
|
|
|
402
|
-
|
|
410
|
+
📌 **useTimer**
|
|
403
411
|
Starts a countdown timer that updates the time every second, returning the current time and any errors.
|
|
404
412
|
|
|
405
413
|
```ts
|
|
@@ -408,7 +416,7 @@ const { time, error } = useTimer(60); // starts from 60 and counts down
|
|
|
408
416
|
|
|
409
417
|
---
|
|
410
418
|
|
|
411
|
-
|
|
419
|
+
📌 **useIsMounted**
|
|
412
420
|
Tracks whether the component is mounted or unmounted, returning a boolean value indicating the component's mount status.
|
|
413
421
|
|
|
414
422
|
```ts
|
|
@@ -417,7 +425,7 @@ const isMounted = useIsMounted();
|
|
|
417
425
|
|
|
418
426
|
---
|
|
419
427
|
|
|
420
|
-
|
|
428
|
+
📌 **useCss**
|
|
421
429
|
Dynamically applies custom CSS to the document and removes it when the component unmounts, handling any errors during the process.
|
|
422
430
|
|
|
423
431
|
```ts
|
|
@@ -426,7 +434,7 @@ const { error } = useCss('body { background: #f5f5f5; }');
|
|
|
426
434
|
|
|
427
435
|
---
|
|
428
436
|
|
|
429
|
-
|
|
437
|
+
📌 **useSpeak**
|
|
430
438
|
Converts text to speech using the Web Speech API, allowing the text to be spoken and handling errors.
|
|
431
439
|
```ts
|
|
432
440
|
const { speak, error } = useSpeak('Hello world!');
|
|
@@ -435,7 +443,7 @@ speak();
|
|
|
435
443
|
|
|
436
444
|
---
|
|
437
445
|
|
|
438
|
-
|
|
446
|
+
📌 **useCountUp**
|
|
439
447
|
Animates a counter that counts up from 0 to a target value within a specified duration, returning the current count and any errors.
|
|
440
448
|
|
|
441
449
|
```ts
|
|
@@ -444,7 +452,7 @@ const { count, error } = useCountUp(100, 5000); // counts up to 100 in 5s
|
|
|
444
452
|
|
|
445
453
|
---
|
|
446
454
|
|
|
447
|
-
|
|
455
|
+
📌 **useCountDown**
|
|
448
456
|
Counts down from a specified start value to zero, updating every second and returning the current count and any errors.
|
|
449
457
|
|
|
450
458
|
```ts
|
|
@@ -453,7 +461,7 @@ const { count, error } = useCountDown(10); // counts down from 10
|
|
|
453
461
|
|
|
454
462
|
---
|
|
455
463
|
|
|
456
|
-
|
|
464
|
+
📌 **useBattery**
|
|
457
465
|
Monitors the battery status of the device, including level, charging status, and remaining charging or discharging time.
|
|
458
466
|
|
|
459
467
|
```ts
|
|
@@ -462,7 +470,7 @@ const { level, charging, supported, loading, chargingTime, dischargingTime } = u
|
|
|
462
470
|
|
|
463
471
|
---
|
|
464
472
|
|
|
465
|
-
|
|
473
|
+
📌 **useEventListener**
|
|
466
474
|
Listens for a specified event on an element or window, and triggers the handler function when the event is fired. It ensures proper cleanup when the component is unmounted.
|
|
467
475
|
|
|
468
476
|
```ts
|
|
@@ -473,7 +481,7 @@ useEventListener('resize', (e) => {
|
|
|
473
481
|
|
|
474
482
|
---
|
|
475
483
|
|
|
476
|
-
|
|
484
|
+
📌 **useHistory**
|
|
477
485
|
Provides methods to navigate the browser history, including pushing and replacing history states, as well as moving back and forward in the history stack.
|
|
478
486
|
|
|
479
487
|
```ts
|
|
@@ -494,7 +502,7 @@ goForward();
|
|
|
494
502
|
|
|
495
503
|
---
|
|
496
504
|
|
|
497
|
-
|
|
505
|
+
📌 **usePreferredLanguage**
|
|
498
506
|
Retrieves the user's preferred language and languages from the browser, and checks if the browser supports the language APIs.
|
|
499
507
|
|
|
500
508
|
```ts
|
|
@@ -509,7 +517,7 @@ console.log(language); // e.g., "en-US"
|
|
|
509
517
|
|
|
510
518
|
---
|
|
511
519
|
|
|
512
|
-
|
|
520
|
+
📌 **useSessionStorage**
|
|
513
521
|
Stores and retrieves data from the `sessionStorage` API, persisting the data during the session. It provides a getter and setter for session-based data.
|
|
514
522
|
|
|
515
523
|
```ts
|
|
@@ -521,7 +529,7 @@ console.log(value);
|
|
|
521
529
|
|
|
522
530
|
---
|
|
523
531
|
|
|
524
|
-
|
|
532
|
+
📌 **useSound**
|
|
525
533
|
Controls the playback of an audio file, including play, pause, and stop functionalities, while also managing the audio volume and handling any errors.
|
|
526
534
|
|
|
527
535
|
```ts
|
|
@@ -542,7 +550,7 @@ setVolume(0.5);
|
|
|
542
550
|
|
|
543
551
|
---
|
|
544
552
|
|
|
545
|
-
|
|
553
|
+
📌 **useTouch**
|
|
546
554
|
Tracks touch events on a given DOM element, returning the touch positions for `touchstart`, `touchmove`, and `touchend`.
|
|
547
555
|
|
|
548
556
|
```ts
|
|
@@ -558,7 +566,7 @@ const {
|
|
|
558
566
|
|
|
559
567
|
---
|
|
560
568
|
|
|
561
|
-
|
|
569
|
+
📌 **useUpdateEffect**
|
|
562
570
|
Executes a side effect on updates after the initial render, skipping the effect during the first render to avoid unnecessary executions.
|
|
563
571
|
|
|
564
572
|
```ts
|
|
@@ -567,16 +575,30 @@ useUpdateEffect(() => {
|
|
|
567
575
|
}, [value]);
|
|
568
576
|
```
|
|
569
577
|
|
|
570
|
-
|
|
571
|
-
|
|
578
|
+
--------------------------------------- **COMPONENTS** --------------------------------------------
|
|
579
|
+
---
|
|
580
|
+
|
|
581
|
+
✅ **DynamicLoader**
|
|
572
582
|
A Higher-Order Component (HOC) that dynamically loads a React component using `React.lazy()` with `Suspense`, while wrapping it in an `ErrorBoundary` to handle potential errors gracefully. It ensures that the component is loaded only when needed, reducing the initial bundle size and improving performance.
|
|
573
583
|
|
|
574
|
-
```
|
|
584
|
+
```jsx
|
|
575
585
|
import React, { lazy } from "react";
|
|
576
586
|
const MyComponent = DynamicLoader(lazy(() => import("./MyComponent")));
|
|
577
587
|
|
|
578
588
|
```
|
|
589
|
+
---
|
|
590
|
+
✅ **AlertMessage**
|
|
591
|
+
A functional React component that displays dynamic alerts using the enqueueSnackbar function. It provides a customizable message with a specified type and duration. The alerts can be dismissed manually by clicking a close button, and they support various configurations such as position, auto-hide duration, and duplicate prevention.
|
|
592
|
+
|
|
593
|
+
```jsx
|
|
594
|
+
<AlertMessage type="success" msg="Data saved successfully!" />
|
|
595
|
+
```
|
|
596
|
+
---
|
|
597
|
+
|
|
598
|
+
✏️ **Authors**
|
|
599
|
+
|
|
600
|
+
    
|
|
579
601
|
|
|
580
|
-
|
|
602
|
+
**License**
|
|
581
603
|
|
|
582
604
|
[MIT](https://opensource.org/licenses)
|
package/dist/hooks/hooksComp.js
CHANGED
|
@@ -52,7 +52,7 @@ var LoadingScreen = function () {
|
|
|
52
52
|
};
|
|
53
53
|
// prettier-ignore
|
|
54
54
|
export var DynamicLoader = function (Component) { return function (props) { return (_jsx(Error, { children: _jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsx(Component, __assign({}, props)) }) })); }; };
|
|
55
|
-
var AlertMessage = function (_a) {
|
|
55
|
+
export var AlertMessage = function (_a) {
|
|
56
56
|
var type = _a.type, msg = _a.msg, duration = _a.duration;
|
|
57
57
|
var _b = getHook('snackBar'), enqueueSnackbar = _b.enqueueSnackbar, closeSnackbar = _b.closeSnackbar;
|
|
58
58
|
if (msg !== undefined && msg !== '') {
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import 'nprogress/nprogress.css';
|
|
2
2
|
import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/hookExecuter";
|
|
3
|
-
import { DynamicLoader } from './hooks/hooksComp';
|
|
3
|
+
import { DynamicLoader, AlertMessage } from './hooks/hooksComp';
|
|
4
4
|
import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown } from './hooks/hooks';
|
|
5
5
|
export default ReactHooksWrapper;
|
|
6
|
-
export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader };
|
|
6
|
+
export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader, AlertMessage };
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import 'nprogress/nprogress.css';
|
|
2
2
|
import { ReactHooksWrapper, getHook, setHook } from "./hookExecuter/hookExecuter";
|
|
3
|
-
import { DynamicLoader } from './hooks/hooksComp';
|
|
3
|
+
import { DynamicLoader, AlertMessage } from './hooks/hooksComp';
|
|
4
4
|
import { useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, } from './hooks/hooks';
|
|
5
5
|
export default ReactHooksWrapper;
|
|
6
|
-
export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader };
|
|
6
|
+
export { getHook, setHook, useAxios, useAdvReducer, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useScrollLock, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useReducedMotion, useCookie, useFetchRetry, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, DynamicLoader, AlertMessage };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-hook-toolkit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "Ultimate package for React developers, offering a powerful collection of hooks and components to enhance their development experience.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|