react-hook-toolkit 0.0.5 → 0.0.7

package/dist/Hooks/hooksComp.d.ts

@@ -0,0 +1,38 @@
+import { RefObject } from 'react';
+export declare function useHover<T extends HTMLElement>(): [RefObject<T>, boolean];
+export declare function useOnClickOutside<T extends HTMLElement>(ref: RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void): void;
+interface IntersectionObserverArgs {
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+}
+export declare function useIntersectionObserver<T extends HTMLElement>(ref: RefObject<T>, { root, rootMargin, threshold }?: IntersectionObserverArgs): boolean;
+export declare function useHoverIntent<T extends HTMLElement>(): [RefObject<T>, boolean];
+export interface DragDropState {
+    isDragging: boolean;
+    isOver: boolean;
+    draggedItemId: string | null;
+    overDropId: string | null;
+}
+export declare const useDragDrop: (onDrop: (dragId: string, dropId: string) => void) => {
+    state: DragDropState;
+    bindDrag: (dragId: string) => {
+        draggable: boolean;
+        onDragStart: (e: React.DragEvent) => void;
+    };
+    bindDrop: (dropId: string) => {
+        onDragOver: (e: React.DragEvent) => void;
+        onDragEnter: (e: React.DragEvent) => void;
+        onDragLeave: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+    };
+};
+export declare function useFocusTrap(ref: React.RefObject<HTMLElement>): void;
+export declare function useFocus<T extends HTMLElement>(): [React.RefObject<T>, boolean];
+interface WindowSize {
+    width: number;
+    height: number;
+}
+export declare function useElementSize<T extends HTMLElement = HTMLDivElement>(): [(node: T | null) => void, WindowSize];
+export declare function useLockBodyScroll(lock?: boolean): void;
+export {};

package/dist/Hooks/hooksComp.js

@@ -0,0 +1,212 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
+export function useHover() {
+    var _a = useState(false), isHovered = _a[0], setIsHovered = _a[1];
+    var ref = useRef(null);
+    useEffect(function () {
+        var node = ref.current;
+        if (!node)
+            return;
+        var handleMouseOver = function () { return setIsHovered(true); };
+        var handleMouseOut = function () { return setIsHovered(false); };
+        node.addEventListener('mouseover', handleMouseOver);
+        node.addEventListener('mouseout', handleMouseOut);
+        return function () {
+            node.removeEventListener('mouseover', handleMouseOver);
+            node.removeEventListener('mouseout', handleMouseOut);
+        };
+    }, []);
+    return [ref, isHovered];
+}
+export function useOnClickOutside(ref, handler) {
+    useEffect(function () {
+        var listener = function (event) {
+            if (!ref.current || ref.current.contains(event.target))
+                return;
+            handler(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return function () {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
+}
+export function useIntersectionObserver(ref, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.root, root = _c === void 0 ? null : _c, _d = _b.rootMargin, rootMargin = _d === void 0 ? '0px' : _d, _e = _b.threshold, threshold = _e === void 0 ? 0 : _e;
+    var _f = useState(false), isIntersecting = _f[0], setIsIntersecting = _f[1];
+    useEffect(function () {
+        var observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            return setIsIntersecting(entry.isIntersecting);
+        }, {
+            root: root,
+            rootMargin: rootMargin,
+            threshold: threshold,
+        });
+        var current = ref.current;
+        if (current)
+            observer.observe(current);
+        return function () {
+            if (current)
+                observer.unobserve(current);
+        };
+    }, [ref, root, rootMargin, threshold]);
+    return isIntersecting;
+}
+export function useHoverIntent() {
+    var _a = useState(false), isHovering = _a[0], setIsHovering = _a[1];
+    var ref = useRef(null);
+    useEffect(function () {
+        var node = ref.current;
+        if (!node)
+            return;
+        var timeout;
+        var handleMouseEnter = function () {
+            timeout = setTimeout(function () { return setIsHovering(true); }, 100);
+        };
+        var handleMouseLeave = function () {
+            clearTimeout(timeout);
+            setIsHovering(false);
+        };
+        node.addEventListener('mouseenter', handleMouseEnter);
+        node.addEventListener('mouseleave', handleMouseLeave);
+        return function () {
+            node.removeEventListener('mouseenter', handleMouseEnter);
+            node.removeEventListener('mouseleave', handleMouseLeave);
+        };
+    }, []);
+    return [ref, isHovering];
+}
+export var useDragDrop = function (onDrop) {
+    var _a = useState({
+        isDragging: false,
+        isOver: false,
+        draggedItemId: null,
+        overDropId: null,
+    }), state = _a[0], setState = _a[1];
+    var handleDragStart = useCallback(function (e, dragId) {
+        e.dataTransfer.setData('text/plain', dragId);
+        e.dataTransfer.effectAllowed = 'move';
+        setState({ isDragging: true, isOver: false, draggedItemId: dragId, overDropId: null });
+    }, []);
+    var handleDragOver = useCallback(function (e, dropId) {
+        e.preventDefault();
+        if (state.overDropId !== dropId) {
+            setState(function (s) { return (__assign(__assign({}, s), { isOver: true, overDropId: dropId })); });
+        }
+    }, [state.overDropId]);
+    var handleDragEnter = useCallback(function (e, dropId) {
+        e.preventDefault();
+        setState(function (s) { return (__assign(__assign({}, s), { isOver: true, overDropId: dropId })); });
+    }, []);
+    var handleDragLeave = useCallback(function (e, dropId) {
+        e.preventDefault();
+        if (state.overDropId === dropId) {
+            setState(function (s) { return (__assign(__assign({}, s), { isOver: false, overDropId: null })); });
+        }
+    }, [state.overDropId]);
+    var handleDrop = useCallback(function (e, dropId) {
+        e.preventDefault();
+        var dragId = e.dataTransfer.getData('text/plain');
+        setState({ isDragging: false, isOver: false, draggedItemId: dragId, overDropId: dropId });
+        onDrop(dragId, dropId);
+    }, [onDrop]);
+    return {
+        state: state,
+        bindDrag: function (dragId) { return ({
+            draggable: true,
+            onDragStart: function (e) { return handleDragStart(e, dragId); },
+        }); },
+        bindDrop: function (dropId) { return ({
+            onDragOver: function (e) { return handleDragOver(e, dropId); },
+            onDragEnter: function (e) { return handleDragEnter(e, dropId); },
+            onDragLeave: function (e) { return handleDragLeave(e, dropId); },
+            onDrop: function (e) { return handleDrop(e, dropId); },
+        }); },
+    };
+};
+export function useFocusTrap(ref) {
+    useEffect(function () {
+        var handleFocus = function (event) {
+            var _a, _b, _c;
+            if (!((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                var focusableElements = (_b = ref.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll('a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])');
+                (_c = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[0]) === null || _c === void 0 ? void 0 : _c.focus();
+                event.preventDefault();
+            }
+        };
+        document.addEventListener('focusin', handleFocus);
+        return function () {
+            document.removeEventListener('focusin', handleFocus);
+        };
+    }, [ref]);
+}
+export function useFocus() {
+    var _a = useState(false), isFocused = _a[0], setIsFocused = _a[1];
+    var ref = useRef(null);
+    useEffect(function () {
+        var element = ref.current;
+        if (!element)
+            return;
+        var handleFocus = function () { return setIsFocused(true); };
+        var handleBlur = function () { return setIsFocused(false); };
+        element.addEventListener('focus', handleFocus);
+        element.addEventListener('blur', handleBlur);
+        return function () {
+            element.removeEventListener('focus', handleFocus);
+            element.removeEventListener('blur', handleBlur);
+        };
+    }, []);
+    return [ref, isFocused];
+}
+export function useElementSize() {
+    var _a = useState(null), ref = _a[0], setRef = _a[1];
+    var _b = useState({ width: 0, height: 0 }), size = _b[0], setSize = _b[1];
+    var handleSize = useCallback(function () {
+        if (ref) {
+            setSize({
+                width: ref.offsetWidth,
+                height: ref.offsetHeight,
+            });
+        }
+    }, [ref]);
+    var useEnviromentEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+    useEnviromentEffect(function () {
+        if (!ref)
+            return;
+        handleSize();
+        var resizeObserver = new ResizeObserver(handleSize);
+        resizeObserver.observe(ref);
+        return function () { return resizeObserver.disconnect(); };
+    }, [ref, handleSize]);
+    return [setRef, size];
+}
+export function useLockBodyScroll(lock) {
+    if (lock === void 0) { lock = true; }
+    useLayoutEffect(function () {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        var originalStyle = window.getComputedStyle(document.body).overflow;
+        if (lock) {
+            document.body.style.overflow = 'hidden';
+        }
+        return function () {
+            if (lock) {
+                document.body.style.overflow = originalStyle;
+            }
+        };
+    }, [lock]);
+}

package/dist/index.d.ts

@@ -1,195 +1,4 @@
-import * as react from 'react';
-import { RefObject } from 'react';
-import { AxiosRequestConfig } from 'axios';
-
-interface UseAxiosResponse<T> {
-    data: T | null;
-    loading: boolean;
-    error: string | null;
-    makeRequest: (url: string, method?: string, requestData?: any) => void;
-    cancelRequest: () => void;
-}
-interface UseAxiosConfig extends AxiosRequestConfig {
-    baseURL?: string;
-    headers?: {
-        [key: string]: string;
-    };
-}
-declare const useAxios: <T>(config?: UseAxiosConfig) => UseAxiosResponse<T>;
-declare const useAdvReducer: <State, Action extends {
-    type: string;
-}>(initialState: State, actions: Record<string, (state: State, action: Action) => State>) => (state: State | undefined, action: Action) => State;
-interface FetchState<T> {
-    data: T | null;
-    loading: boolean;
-    error: string | null;
-}
-declare function useFetch<T>(url: string): FetchState<T>;
-declare function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void];
-declare function useToggle(initialValue?: boolean): [boolean, () => void];
-declare function useDebounce<T>(value: T, delay: number): T;
-declare function useThrottle<T>(value: T, limit: number): T;
-declare function usePrevious<T>(value: T): T | undefined;
-declare function useMediaQuery(query: string): boolean;
-declare function useClipboard(): [boolean, (text: string) => Promise<void>];
-declare function useInterval(callback: () => void, delay: number | null): void;
-interface WindowSize {
-    width: number;
-    height: number;
-}
-declare function useWindowSize(): WindowSize;
-declare function useKeyPress(targetKey: string): boolean;
-declare function useOnlineStatus(): boolean;
-interface ScrollPosition {
-    x: number;
-    y: number;
-}
-declare function useScrollPosition(): ScrollPosition;
-declare function useTimeout(callback: () => void, delay: number | null): void;
-declare function useDarkMode(): [boolean, () => void];
-declare function useForm<T extends Record<string, any>>(initialValues: T): {
-    values: T;
-    errors: Partial<Record<keyof T, string>>;
-    handleChange: (name: keyof T, value: any) => void;
-    validate: (validators: Partial<Record<keyof T, (value: any) => string | null>>) => boolean;
-};
-declare function useArray<T>(initialArray: T[]): {
-    array: T[];
-    set: react.Dispatch<react.SetStateAction<T[]>>;
-    push: (item: T) => void;
-    removeByIndex: (index: number) => void;
-    clear: () => void;
-};
-declare function useStep<T>(steps: T[]): {
-    currentStep: T;
-    currentStepIndex: number;
-    next: () => void;
-    previous: () => void;
-    reset: () => void;
-    isFirstStep: boolean;
-    isLastStep: boolean;
-};
-declare function useTimeoutFn(callback: () => void, delay: number | null): {
-    reset: () => void;
-    clear: () => void;
-};
-declare function useDebouncedCallback(callback: () => void, delay: number): () => void;
-declare function useScrollLock(lock: boolean): void;
-declare function useResizeObserver<T extends HTMLElement>(ref: RefObject<T>): WindowSize | null;
-interface MousePosition {
-    x: number;
-    y: number;
-}
-declare function useMousePosition(): MousePosition;
-type ScrollDirection = 'up' | 'down';
-declare function useScrollDirection(): ScrollDirection;
-declare function useImageLoader(src: string): {
-    loaded: boolean;
-    error: boolean;
-};
-declare function usePersistedState<T>(key: string, initialValue: T): [T, React.Dispatch<React.SetStateAction<T>>];
-declare function useReducedMotion(): boolean;
-declare function useCookie(key: string): [string | null, (value: string, options?: any) => void, () => void];
-declare function useFetchRetry<T>(url: string, options: RequestInit, retries?: number): {
-    data: T | null;
-    error: string | null;
-    loading: boolean;
-};
-declare function useDelay<T>(value: T, delay: number): T;
-declare function useVisibilityChange(): boolean;
-declare function useDebouncedValue<T>(value: T, delay: number): T;
-type Status = 'idle' | 'pending' | 'success' | 'error';
-type AsyncFunction<T> = () => Promise<T>;
-interface UseAsyncReturn<T> {
-    execute: () => void;
-    status: Status;
-    value: T | null;
-    error: Error | null;
-}
-declare function useAsync<T>(asyncFunction: AsyncFunction<T>, immediate?: boolean): UseAsyncReturn<T>;
-type ScriptStatus = 'loading' | 'ready' | 'error' | 'unknown';
-declare function useScript(src: string, removeOnUnmount?: boolean): ScriptStatus;
-declare function useIndexedDB<T>(dbName: string, storeName: string): {
-    data: T | null;
-    error: Error | null;
-};
-declare function useGeoLocation(): {
-    position: GeolocationPosition | null;
-    error: Error | null;
-};
-declare function useTimer(initialTime: number): {
-    time: number;
-    error: Error | null;
-};
-declare function useIsMounted(): boolean;
-declare function useCss(css: string): {
-    error: Error | null;
-};
-declare function useSpeak(text: string): {
-    speak: () => void;
-    error: Error | null;
-};
-declare function useCountUp(target: number, duration: number): {
-    count: number;
-    error: Error | null;
-};
-declare function useCountDown(start: number): {
-    count: number;
-    error: Error | null;
-};
-interface BatteryState {
-    supported: boolean;
-    loading: boolean;
-    level: number | null;
-    charging: boolean | null;
-    chargingTime: number | null;
-    dischargingTime: number | null;
-}
-declare const useBattery: () => BatteryState;
-declare const useEventListener: (eventName: string, handler: (event: Event) => void, elementRef?: React.RefObject<HTMLElement>, options?: boolean | AddEventListenerOptions) => void;
-interface HistoryState {
-    [key: string]: any;
-}
-interface UseHistory {
-    history: History;
-    state: HistoryState | null;
-    push: (path: string, state?: HistoryState) => void;
-    replace: (path: string, state?: HistoryState) => void;
-    goBack: () => void;
-    goForward: () => void;
-}
-declare const useHistory: () => UseHistory;
-interface UsePreferredLanguage {
-    language: string;
-    languages: Array<string>;
-    isSupported: boolean;
-}
-declare const usePreferredLanguage: () => UsePreferredLanguage;
-interface UseSessionStorage<T> {
-    (key: string, initialValue: T): [T, (value: T) => void];
-}
-declare const useSessionStorage: UseSessionStorage<any>;
-interface UseSound {
-    play: () => void;
-    pause: () => void;
-    stop: () => void;
-    setVolume: (volume: number) => void;
-    isPlaying: boolean;
-    error: Error | null;
-}
-declare const useSound: (url: string) => UseSound;
-interface TouchPosition {
-    x: number | null;
-    y: number | null;
-}
-interface UseTouch {
-    (elementRef: React.RefObject<HTMLElement>): {
-        touchStart: TouchPosition;
-        touchMove: TouchPosition;
-        touchEnd: TouchPosition;
-    };
-}
-declare const useTouch: UseTouch;
-declare const useUpdateEffect: (effect: React.EffectCallback, deps: React.DependencyList) => void;
-
-export { type AsyncFunction, type ScriptStatus, type Status, type UseAsyncReturn, useAdvReducer, useArray, useAsync, useAxios, useBattery, useClipboard, useCookie, useCountDown, useCountUp, useCss, useDarkMode, useDebounce, useDebouncedCallback, useDebouncedValue, useDelay, useEventListener, useFetch, useFetchRetry, useForm, useGeoLocation, useHistory, useImageLoader, useIndexedDB, useInterval, useIsMounted, useKeyPress, useLocalStorage, useMediaQuery, useMousePosition, useOnlineStatus, usePersistedState, usePreferredLanguage, usePrevious, useReducedMotion, useResizeObserver, useScript, useScrollDirection, useScrollLock, useScrollPosition, useSessionStorage, useSound, useSpeak, useStep, useThrottle, useTimeout, useTimeoutFn, useTimer, useToggle, useTouch, useUpdateEffect, useVisibilityChange, useWindowSize };
+export * from './Hooks/hooks';
+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';
+import { useHover, useOnClickOutside, useIntersectionObserver, useHoverIntent, useDragDrop, useFocusTrap, useFocus, useElementSize, useLockBodyScroll } from './Hooks/hooksComp';
+export { useAxios, useAdvReducer, useHover, useFetch, useLocalStorage, useToggle, useDebounce, useThrottle, usePrevious, useOnClickOutside, useMediaQuery, useClipboard, useInterval, useWindowSize, useKeyPress, useIntersectionObserver, useOnlineStatus, useScrollPosition, useTimeout, useDarkMode, useForm, useArray, useStepper, useUpdateEffect, useTouch, useSound, useSessionStorage, usePreferredLanguage, useHistory, useEventListener, useBattery, useDebouncedCallback, useHoverIntent, useScrollLock, useDragDrop, useResizeObserver, useMousePosition, useScrollDirection, useImageLoader, usePersistedState, useFocusTrap, useReducedMotion, useCookie, useFetchRetry, useFocus, useDelay, useVisibilityChange, useDebouncedValue, useAsync, useElementSize, useLockBodyScroll, useScript, useIndexedDB, useGeoLocation, useTimer, useIsMounted, useCss, useSpeak, useCountUp, useCountDown, };