@sohanemon/utils 4.0.16 → 4.0.19

package/dist/components/media-wrapper.d.ts

@@ -6,5 +6,5 @@ type MediaWrapperProps = React.ComponentProps<'div'> & {
     fallback?: React.ElementType;
     classNameFallback?: string;
 };
-export declare function MediaWrapper({ breakpoint, as, fallback, classNameFallback, className: classNameOriginal, ...props }: MediaWrapperProps): any;
+export declare function MediaWrapper({ breakpoint, as, fallback, classNameFallback, className: classNameOriginal, ...props }: MediaWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/hooks/index.d.ts

@@ -1,13 +1,30 @@
-import { type Dispatch, type EffectCallback, type SetStateAction } from 'react';
-export declare const useClickOutside: (callback?: () => void) => any;
-export declare function useMediaQuery(tailwindBreakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | `(${string})`): any;
+import { type Dispatch, type EffectCallback, type SetStateAction, useEffect } from 'react';
+export declare const useClickOutside: (callback?: () => void) => import("react").MutableRefObject<HTMLDivElement>;
+export declare function useMediaQuery(tailwindBreakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | `(${string})`): boolean;
 export declare function useEffectOnce(effect: EffectCallback): void;
 export declare function useUpdateEffect(effect: EffectCallback, deps: any[]): void;
 export declare function useDebounce<T>(state: T, delay?: number): T;
-export declare const useIsomorphicEffect: any;
+export declare const useIsomorphicEffect: typeof useEffect;
 export declare function useTimeout(callback: () => void, delay?: number | null): void;
 export declare function useWindowEvent<K extends string = keyof WindowEventMap>(type: K, listener: K extends keyof WindowEventMap ? (this: Window, ev: WindowEventMap[K]) => void : (this: Window, ev: CustomEvent) => void, options?: boolean | AddEventListenerOptions): void;
 type LocalStorageValue<T> = [T, Dispatch<SetStateAction<T>>];
 export declare const useLocalStorage: <T extends Record<string, any>>(key: string, defaultValue: T) => LocalStorageValue<T>;
 export declare const useUrlParams: <T extends string | number | boolean>(key: string, defaultValue: T) => [T, (value: T) => void];
-export {};
+interface UseAsyncOptions<T extends (...args: any) => any> {
+    initialArgs?: Parameters<T>[0];
+    callback?: {
+        onSuccess?: (result: T) => void;
+        onError?: (error: Error) => void;
+        onExecute?: () => void;
+        onSettle?: () => void;
+    };
+    mode?: 'onLoad' | 'onTrigger';
+}
+export declare const useAsync: <T extends (...args: any) => any>(fn: T, opts?: UseAsyncOptions<T>) => {
+    execute: (args: Parameters<T>[0]) => Promise<void>;
+    isLoading: boolean;
+    result: Awaited<ReturnType<T>>;
+    error: Error;
+};
+export declare const useQuerySelector: <T extends Element>(selector: string) => T | null;
+export default useQuerySelector;

package/dist/hooks/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useTransition, useCallback, useRef, useState, } from 'react';
 export const useClickOutside = (callback = () => alert('clicked outside')) => {
     const ref = useRef(null);
     const listener = (e) => {
@@ -51,12 +51,10 @@ export function useMediaQuery(tailwindBreakpoint) {
         return () => {
             matchMedia.removeEventListener('change', handleChange);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [parsedQuery]);
     return matches;
 }
 export function useEffectOnce(effect) {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(effect, []);
 }
 export function useUpdateEffect(effect, deps) {
@@ -146,3 +144,71 @@ export const useUrlParams = (key, defaultValue) => {
     };
     return [value, updateValue];
 };
+export const useAsync = (fn, opts = {}) => {
+    const { initialArgs, callback = {}, mode = 'onTrigger' } = opts;
+    const { onSuccess, onError, onExecute, onSettle } = callback;
+    const [isLoading, setIsLoading] = useState(false);
+    const [result, setValue] = useState(null);
+    const [error, setError] = useState(null);
+    const [isPending, startTransition] = useTransition();
+    const execute = useCallback(async (args) => {
+        setIsLoading(true);
+        setValue(null);
+        setError(null);
+        onExecute?.();
+        try {
+            startTransition(() => {
+                (async () => {
+                    const response = await fn(args);
+                    setValue(response);
+                    onSuccess?.(response);
+                })();
+            });
+        }
+        catch (error) {
+            setError(error);
+            onError?.(error);
+        }
+        finally {
+            setIsLoading(false);
+            onSettle?.();
+        }
+    }, [fn, onExecute, onSuccess, onError, onSettle]);
+    useIsomorphicEffect(() => {
+        if (mode === 'onLoad') {
+            execute(initialArgs);
+        }
+    }, []);
+    return {
+        execute,
+        isLoading: isLoading || isPending,
+        result,
+        error,
+    };
+};
+export const useQuerySelector = (selector) => {
+    const [element, setElement] = useState(null);
+    const elementRef = useRef(null);
+    useLayoutEffect(() => {
+        const referenceElement = document.querySelector(selector);
+        if (!referenceElement)
+            return;
+        if (elementRef.current !== referenceElement) {
+            elementRef.current = referenceElement;
+            setElement(referenceElement);
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            // Only update state if the element reference changes
+            if (elementRef.current !== referenceElement) {
+                elementRef.current = referenceElement;
+                setElement(referenceElement);
+            }
+        });
+        resizeObserver.observe(referenceElement);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [selector]);
+    return element;
+};
+export default useQuerySelector;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@sohanemon/utils",
-  "version": "4.0.16",
+  "version": "4.0.19",
+  "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",
   "source": "./src/index.ts",
@@ -14,36 +15,28 @@
   },
   "typesVersions": {
     "*": {
-      "hooks": [
-        "dist/hooks/index.d.ts"
-      ],
-      "components": [
-        "dist/components/index.d.ts"
-      ]
+      "core": ["dist/index.d.ts"],
+      "hooks": ["dist/hooks/index.d.ts"],
+      "components": ["dist/components/index.d.ts"]
     }
   },
-  "files": [
-    "dist",
-    "README.md"
-  ],
+  "files": ["dist", "README.md"],
   "scripts": {
     "build": "tsc",
     "build:watch": "tsc --watch",
     "export": "tsc && npm publish"
   },
-  "keywords": [
-    "utils",
-    "cn"
-  ],
-  "author": "sohanemon",
+  "keywords": ["utils", "cn"],
   "license": "ISC",
   "devDependencies": {
-    "typescript": "^5.2.2"
+    "typescript": "^5.5.4"
   },
   "dependencies": {
     "@iconify/react": "^4.1.1",
-    "clsx": "^2.0.0",
-    "react": "^18.2.0",
+    "@types/node": "^22.4.0",
+    "@types/react": "^18.3.3",
+    "clsx": "^2.1.1",
+    "react": "^18.3.1",
     "tailwind-merge": "^1.14.0"
   }
 }