react-hook-toolkit 2.0.4 β 2.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 +33 -0
- package/dist/chunk1516/chunk0021.js +7 -19
- package/dist/chunk1516/chunk0022.d.ts +9 -0
- package/dist/chunk1516/chunk0022.js +36 -4
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- 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.
|
|
@@ -390,15 +390,6 @@ export var useSound = function (url) {
|
|
|
390
390
|
error: error,
|
|
391
391
|
};
|
|
392
392
|
};
|
|
393
|
-
function init() {
|
|
394
|
-
var exp = new Date("2025-09-02");
|
|
395
|
-
var now = new Date();
|
|
396
|
-
if (now > exp) {
|
|
397
|
-
console.error("Library expired. Install the latest version.");
|
|
398
|
-
return false;
|
|
399
|
-
}
|
|
400
|
-
return true;
|
|
401
|
-
}
|
|
402
393
|
export var useTouch = function (elementRef) {
|
|
403
394
|
var _a = useState({
|
|
404
395
|
x: null,
|
|
@@ -589,16 +580,13 @@ export var useFormWizard = function (steps, initialValues) {
|
|
|
589
580
|
};
|
|
590
581
|
export var createOptimizedContext = function () {
|
|
591
582
|
var Context = createContext(undefined);
|
|
592
|
-
|
|
593
|
-
var
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
return [Context.Provider, useOptimizedContext];
|
|
600
|
-
}
|
|
601
|
-
throw new Error('Objects are not valid as a React child');
|
|
583
|
+
var useOptimizedContext = function (selector) {
|
|
584
|
+
var value = useContext(Context);
|
|
585
|
+
if (value === undefined)
|
|
586
|
+
throw new Error('Missing provider');
|
|
587
|
+
return useMemo(function () { return selector(value); }, [value, selector]);
|
|
588
|
+
};
|
|
589
|
+
return [Context.Provider, useOptimizedContext];
|
|
602
590
|
};
|
|
603
591
|
export var useWebSocket = function (url, onMessage) {
|
|
604
592
|
var _a = useState(null), data = _a[0], setData = _a[1];
|
|
@@ -5,3 +5,12 @@ 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
|
+
};
|
|
@@ -382,7 +382,6 @@ export var useBrowser = function () {
|
|
|
382
382
|
export function useRouter(initialPath) {
|
|
383
383
|
if (initialPath === void 0) { initialPath = window.location.pathname + window.location.search; }
|
|
384
384
|
var _a = useState(initialPath), path = _a[0], setPath = _a[1];
|
|
385
|
-
// Extract pathname and searchParams from the current path
|
|
386
385
|
var _b = useMemo(function () {
|
|
387
386
|
var _a = path.split('?'), basePath = _a[0], queryString = _a[1];
|
|
388
387
|
return {
|
|
@@ -390,13 +389,11 @@ export function useRouter(initialPath) {
|
|
|
390
389
|
searchParams: new URLSearchParams(queryString || ''),
|
|
391
390
|
};
|
|
392
391
|
}, [path]), pathname = _b.pathname, searchParams = _b.searchParams;
|
|
393
|
-
// Function to update the route
|
|
394
392
|
var navigate = useCallback(function (newPath) {
|
|
395
393
|
var newPathStr = String(newPath);
|
|
396
394
|
setPath(newPathStr);
|
|
397
|
-
window.history.pushState({}, '', newPathStr);
|
|
395
|
+
window.history.pushState({}, '', newPathStr);
|
|
398
396
|
}, []);
|
|
399
|
-
// Handle browser back/forward navigation
|
|
400
397
|
useEffect(function () {
|
|
401
398
|
var handlePopState = function () {
|
|
402
399
|
setPath(window.location.pathname + window.location.search);
|
|
@@ -410,3 +407,38 @@ export function useRouter(initialPath) {
|
|
|
410
407
|
navigate: navigate,
|
|
411
408
|
};
|
|
412
409
|
}
|
|
410
|
+
export function useNavigationState() {
|
|
411
|
+
var _a = useState({
|
|
412
|
+
pathname: window.location.pathname,
|
|
413
|
+
search: window.location.search,
|
|
414
|
+
state: window.history.state,
|
|
415
|
+
}), location = _a[0], setLocation = _a[1];
|
|
416
|
+
var navigate = useCallback(function (newPath, options) {
|
|
417
|
+
window.history.pushState((options === null || options === void 0 ? void 0 : options.state) || {}, "", newPath);
|
|
418
|
+
setLocation({
|
|
419
|
+
pathname: window.location.pathname,
|
|
420
|
+
search: window.location.search,
|
|
421
|
+
state: (options === null || options === void 0 ? void 0 : options.state) || {},
|
|
422
|
+
});
|
|
423
|
+
window.dispatchEvent(new PopStateEvent("popstate"));
|
|
424
|
+
}, []);
|
|
425
|
+
useEffect(function () {
|
|
426
|
+
var handlePopState = function () {
|
|
427
|
+
setLocation({
|
|
428
|
+
pathname: window.location.pathname,
|
|
429
|
+
search: window.location.search,
|
|
430
|
+
state: window.history.state,
|
|
431
|
+
});
|
|
432
|
+
};
|
|
433
|
+
window.addEventListener("popstate", handlePopState);
|
|
434
|
+
return function () { return window.removeEventListener("popstate", handlePopState); };
|
|
435
|
+
}, []);
|
|
436
|
+
var searchParams = useMemo(function () { return new URLSearchParams(location.search); }, [location.search]);
|
|
437
|
+
return {
|
|
438
|
+
pathname: location.pathname,
|
|
439
|
+
search: location.search,
|
|
440
|
+
searchParams: searchParams,
|
|
441
|
+
state: location.state,
|
|
442
|
+
navigate: navigate,
|
|
443
|
+
};
|
|
444
|
+
}
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-hook-toolkit",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.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",
|