hookify-react/dist/index.cjs

A collection of optimized and reusable React hooks for state management, dom interaction, responsive design, storage, location, asynchronous management and performance improvements.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  useAdvancedEffect: () => useAdvancedEffect,
  useArray: () => useArray,
  useClickOutside: () => useClickOutside,
  useCopyToClipboard: () => useCopyToClipboard,
  useCounter: () => useCounter,
  useDebounce: () => useDebounce,
  useEventListener: () => useEventListener,
  useFormState: () => useFormState,
  useGeoLocation: () => useGeoLocation,
  useHistory: () => useHistory,
  useHover: () => useHover,
  useInterval: () => useInterval,
  useLocalStorage: () => useLocalStorage,
  useOnScreen: () => useOnScreen,
  useOnlineStatus: () => useOnlineStatus,
  usePress: () => usePress,
  usePrevious: () => usePrevious,
  useScrollInfo: () => useScrollInfo,
  useSessionStorage: () => useSessionStorage,
  useSize: () => useSize,
  useStorage: () => useStorage,
  useTimeout: () => useTimeout,
  useToggle: () => useToggle,
  useUpdatedEffect: () => useUpdatedEffect,
  useWindowSize: () => useWindowSize
});
module.exports = __toCommonJS(index_exports);

// src/hooks/default/useAdvancedEffect.ts
var import_react = require("react");
function useAdvancedEffect(effect, deps) {
  const firstRender = (0, import_react.useRef)(true);
  const previousDepsRef = (0, import_react.useRef)(void 0);
  (0, import_react.useEffect)(() => {
    if (firstRender.current) {
      firstRender.current = false;
      previousDepsRef.current = deps;
      return;
    }
    const hasDepsChanged = deps.some(
      (dep, i) => dep !== previousDepsRef.current?.[i]
    );
    if (hasDepsChanged) {
      previousDepsRef.current = deps;
      return effect();
    }
  }, [deps, effect]);
}

// src/hooks/default/useUpdatedEffect.ts
var import_react2 = require("react");
function useUpdatedEffect(effect, deps) {
  const previousDepsRef = (0, import_react2.useRef)(void 0);
  (0, import_react2.useEffect)(() => {
    previousDepsRef.current = deps;
    const isDepsChanged = deps.some(
      (dep, i) => dep !== previousDepsRef.current?.[i]
    );
    if (isDepsChanged) {
      previousDepsRef.current = deps;
      return effect();
    }
  }, [effect, deps]);
}

// src/hooks/state-management/useArray.ts
var import_react3 = require("react");
function useArray(initialValue) {
  const [state, setState] = (0, import_react3.useState)(initialValue);
  const initialValueRef = (0, import_react3.useRef)(initialValue);
  const push = (value) => {
    setState((prev) => [...prev, value]);
    return state.length + 1;
  };
  const pop = () => {
    const lastElement = state[state.length - 1];
    setState((prev) => prev.slice(0, -1));
    return lastElement;
  };
  const unshift = (value) => {
    setState((prev) => [value, ...prev]);
    return state.length + 1;
  };
  const shift = () => {
    const firstElement = state[0];
    setState((prev) => prev.slice(1));
    return firstElement;
  };
  const removeByIndex = (index) => {
    setState((prev) => [...prev.slice(0, index), ...prev.slice(index + 1)]);
  };
  const removeByValue = (value) => {
    setState(
      (prev) => prev.filter((item) => {
        if (typeof value === "object") {
          return JSON.stringify(item) !== JSON.stringify(value);
        } else {
          return item !== value;
        }
      })
    );
  };
  const clear = () => {
    setState([]);
  };
  const replace = (newArray) => {
    setState(newArray);
  };
  const reset = () => {
    setState(initialValueRef.current);
  };
  const filter = (predicate) => {
    setState((prev) => prev.filter(predicate));
  };
  const updateByIndex = (index, value) => {
    setState((prev) => prev.map((item, i) => i === index ? value : item));
  };
  const updateByValue = (prevValue, newValue) => {
    setState(
      (prev) => prev.map((item) => {
        if (typeof item !== "object")
          return item === prevValue ? newValue : item;
        return JSON.stringify(item) === JSON.stringify(prevValue) ? newValue : item;
      })
    );
  };
  return [
    state,
    setState,
    {
      push,
      pop,
      shift,
      unshift,
      removeByIndex,
      removeByValue,
      clear,
      filter,
      reset,
      replace,
      updateByIndex,
      updateByValue
    }
  ];
}

// src/hooks/state-management/useCounter.ts
var import_react4 = require("react");
function useCounter(initialValue = 0) {
  const [count, setCount] = (0, import_react4.useState)(initialValue);
  const initialValueRef = (0, import_react4.useRef)(initialValue);
  const increment = () => {
    setCount((prev) => prev + 1);
  };
  const incrementByValue = (value) => {
    setCount((prev) => prev + value);
  };
  const decrement = () => {
    setCount((prev) => prev - 1);
  };
  const decrementByValue = (value) => {
    setCount((prev) => prev - value);
  };
  const reset = () => {
    setCount(initialValueRef.current);
  };
  return {
    count,
    increment,
    incrementByValue,
    decrement,
    decrementByValue,
    reset
  };
}

// src/hooks/state-management/useFormState.ts
var import_react5 = require("react");
function useFormState(defaultValue, predicates, { emptyInputValidation = true } = {}) {
  const resolvedDefaultValue = (0, import_react5.useMemo)(
    () => typeof defaultValue === "function" ? defaultValue() : defaultValue,
    [defaultValue]
  );
  const resolvedDefaultValueRef = (0, import_react5.useRef)(resolvedDefaultValue);
  const [state, setState] = (0, import_react5.useState)(resolvedDefaultValue);
  const [errors, setErrors] = (0, import_react5.useState)(
    Array(predicates.length).fill(void 0)
  );
  const validate = (0, import_react5.useCallback)(
    (value) => {
      const newErrors = predicates.map((predicate) => predicate(value));
      if (JSON.stringify(newErrors) !== JSON.stringify(errors)) {
        setErrors(newErrors);
      }
    },
    [predicates, errors]
  );
  const setValue = (0, import_react5.useCallback)(
    (value) => {
      setState((prev) => {
        const newValue = typeof value === "function" ? value(prev) : value;
        validate(newValue);
        if (typeof newValue === "string" && newValue.length === 0 && !emptyInputValidation) {
          setErrors([]);
        }
        return newValue;
      });
    },
    [validate, emptyInputValidation]
  );
  const filteredErrors = (0, import_react5.useMemo)(
    () => errors.filter((error) => !!error),
    [errors]
  );
  const isValid = filteredErrors.length === 0;
  const status = (0, import_react5.useMemo)(() => {
    if (resolvedDefaultValueRef.current === state && isValid) return "idle";
    return isValid ? "valid" : "error";
  }, [state, isValid]);
  return [
    state,
    setValue,
    { errors: filteredErrors, isValid, status }
  ];
}

// src/hooks/state-management/useHistory.ts
var import_react6 = require("react");
function useHistory(defaultValue, { capacity = 10 } = {}) {
  const resolvedDefaultValue = typeof defaultValue === "function" ? defaultValue() : defaultValue;
  const [state, setState] = (0, import_react6.useState)(resolvedDefaultValue);
  const historyRef = (0, import_react6.useRef)([resolvedDefaultValue]);
  const pointerRef = (0, import_react6.useRef)(0);
  const set = (0, import_react6.useCallback)(
    (value) => {
      setState((prev) => {
        const resolvedValue = typeof value === "function" ? value(prev) : value;
        if (historyRef.current[pointerRef.current] !== resolvedValue) {
          if (pointerRef.current < historyRef.current.length - 1) {
            historyRef.current = historyRef.current.slice(
              0,
              pointerRef.current + 1
            );
          }
          historyRef.current.push(resolvedValue);
          if (historyRef.current.length > capacity) {
            historyRef.current.shift();
          }
          pointerRef.current = historyRef.current.length - 1;
        }
        return resolvedValue;
      });
    },
    [capacity]
  );
  const back = (0, import_react6.useCallback)(() => {
    if (pointerRef.current > 0) {
      pointerRef.current--;
      setState(historyRef.current[pointerRef.current]);
    }
  }, []);
  const forward = (0, import_react6.useCallback)(() => {
    if (pointerRef.current < historyRef.current.length - 1) {
      pointerRef.current++;
      setState(historyRef.current[pointerRef.current]);
    }
  }, []);
  const go = (0, import_react6.useCallback)((index) => {
    if (index >= 0 && index < historyRef.current.length) {
      pointerRef.current = index;
      setState(historyRef.current[pointerRef.current]);
    }
  }, []);
  return [
    state,
    set,
    {
      history: historyRef.current,
      pointer: pointerRef.current,
      back,
      forward,
      go
    }
  ];
}

// src/hooks/state-management/usePrevious.ts
var import_react7 = require("react");
function usePrevious(value) {
  const ref = (0, import_react7.useRef)(null);
  (0, import_react7.useEffect)(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

// src/hooks/state-management/useToggle.ts
var import_react8 = require("react");
function useToggle(initialValue) {
  const [state, setState] = (0, import_react8.useState)(initialValue);
  function setValue(value) {
    setState((prev) => typeof value === "boolean" ? value : !prev);
  }
  return [state, setValue];
}

// src/hooks/async-management/useDebounce.ts
var import_react10 = require("react");

// src/hooks/async-management/useTimeout.ts
var import_react9 = require("react");
function useTimeout(callback, delay) {
  const callbackRef = (0, import_react9.useRef)(callback);
  const timeoutRef = (0, import_react9.useRef)();
  const set = (0, import_react9.useCallback)(() => {
    timeoutRef.current = window.setTimeout(() => {
      callbackRef.current();
    }, delay);
  }, [delay]);
  const clear = (0, import_react9.useCallback)(() => {
    if (timeoutRef.current !== void 0) {
      clearTimeout(timeoutRef.current);
      timeoutRef.current = void 0;
    }
  }, []);
  const reset = (0, import_react9.useCallback)(() => {
    clear();
    set();
  }, [clear, set]);
  (0, import_react9.useEffect)(() => {
    set();
    return clear;
  }, [set, clear]);
  (0, import_react9.useEffect)(() => {
    callbackRef.current = callback;
  }, [callback]);
  return { set, clear, reset };
}

// src/hooks/async-management/useDebounce.ts
function useDebounce(callback, delay, deps) {
  const { reset, clear } = useTimeout(callback, delay);
  (0, import_react10.useEffect)(reset, [...deps, reset]);
  (0, import_react10.useEffect)(clear, [clear]);
}

// src/hooks/async-management/useInterval.ts
var import_react11 = require("react");
function useInterval(callback, interval = 1e3) {
  const intervalRef = (0, import_react11.useRef)(null);
  const clear = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  };
  (0, import_react11.useEffect)(() => {
    intervalRef.current = setInterval(callback, interval);
    return clear;
  }, [callback, interval]);
  return { clear };
}

// src/hooks/storage/useStorage.ts
var import_react12 = require("react");
function useStorage(key, defaultValue, storage) {
  const [value, setValue] = (0, import_react12.useState)(() => {
    try {
      const storedJsonValue = storage.getItem(key);
      if (storedJsonValue !== null) return JSON.parse(storedJsonValue);
    } catch (error) {
      console.error(`Error parsing storage key "${key}":`, error);
    }
    return typeof defaultValue === "function" ? defaultValue() : defaultValue;
  });
  (0, import_react12.useEffect)(() => {
    if (value === void 0) {
      storage.removeItem(key);
    } else {
      storage.setItem(key, JSON.stringify(value));
    }
  }, [value, key, storage]);
  return [value, setValue];
}
function useLocalStorage(key, defaultValue) {
  return useStorage(key, defaultValue, window.localStorage);
}
function useSessionStorage(key, defaultValue) {
  return useStorage(key, defaultValue, window.sessionStorage);
}

// src/hooks/dom/useCopyToClipboard.ts
var import_react13 = require("react");
function useCopyToClipboard() {
  const [isCopied, setIsCopied] = (0, import_react13.useState)(false);
  const [error, setError] = (0, import_react13.useState)(null);
  async function copy(text) {
    try {
      if (!navigator.clipboard) {
        throw new Error("Clipboard API not available");
      }
      await navigator.clipboard.writeText(text);
      setIsCopied(true);
      setError(null);
      setTimeout(() => setIsCopied(false), 2e3);
    } catch (err) {
      setError(err.message);
      setIsCopied(false);
    }
  }
  return { copy, isCopied, error };
}

// src/hooks/dom/useEventListener.ts
var import_react14 = require("react");
function useEventListener(eventType, callback, elementRef, options) {
  const callbackRef = (0, import_react14.useRef)(callback);
  (0, import_react14.useEffect)(() => {
    callbackRef.current = callback;
  }, [callback]);
  (0, import_react14.useEffect)(() => {
    const target = elementRef?.current ?? window;
    if (!(target && target.addEventListener)) return;
    const handleEvent = (event) => callbackRef.current(event);
    target.addEventListener(eventType, handleEvent, options);
    return () => {
      target.removeEventListener(
        eventType,
        handleEvent,
        options
      );
    };
  }, [eventType, elementRef, options]);
}

// src/hooks/dom/useHover.ts
var import_react15 = require("react");
function useHover() {
  const [isHovered, setIsHovered] = (0, import_react15.useState)(false);
  const ref = (0, import_react15.useRef)(null);
  const handleHover = (0, import_react15.useCallback)(
    (event) => setIsHovered(event.type === "mouseenter"),
    []
  );
  useEventListener("mouseenter", handleHover, ref);
  useEventListener("mouseleave", handleHover, ref);
  return { ref, isHovered };
}

// src/hooks/dom/useOnClickOutside.ts
var import_react16 = require("react");
function useClickOutside(callback) {
  const ref = (0, import_react16.useRef)(null);
  const handleClick = (0, import_react16.useCallback)(
    (event) => {
      if (!ref.current?.contains(event.target)) {
        callback();
      }
    },
    [callback, ref]
  );
  useEventListener("mousedown", handleClick, { current: document.body });
  useEventListener("touchstart", handleClick, { current: document.body });
  return { ref };
}

// src/hooks/dom/useOnlineStatus.ts
var import_react17 = require("react");
function useOnlineStatus() {
  const [onlineStatus, setOnlineStatus] = (0, import_react17.useState)(
    navigator.onLine ? "online" : "offline"
  );
  const updateStatus = () => {
    setOnlineStatus(navigator.onLine ? "online" : "offline");
  };
  useEventListener("online", updateStatus, { current: window });
  return { onlineStatus };
}

// src/hooks/dom/useOnScreen.ts
var import_react18 = require("react");
function useOnScreen(rootMargin = "0px") {
  const [isVisible, setIsVisible] = (0, import_react18.useState)(false);
  const ref = (0, import_react18.useRef)(null);
  (0, import_react18.useEffect)(() => {
    const target = ref.current;
    if (!target) return;
    const observer = new IntersectionObserver(
      ([entry]) => setIsVisible(entry.isIntersecting),
      { rootMargin }
    );
    observer.observe(target);
    return () => observer.unobserve(target);
  }, [ref, rootMargin]);
  return { ref, isVisible };
}

// src/hooks/dom/usePress.ts
var import_react19 = require("react");
function usePress() {
  const [isPressed, setIsPressed] = (0, import_react19.useState)(false);
  const ref = (0, import_react19.useRef)(null);
  useEventListener("mousedown", () => setIsPressed(true), ref);
  useEventListener("mouseup", () => setIsPressed(false), ref);
  return { isPressed, ref };
}

// src/hooks/dom/useScrollPosition.ts
var import_react20 = require("react");
function useScrollInfo() {
  const ref = (0, import_react20.useRef)(null);
  const [scrollData, setScrollData] = (0, import_react20.useState)({
    scrollX: 0,
    scrollY: 0,
    scrollDirection: "none",
    isScrolling: false,
    scrollProgress: 0
  });
  const lastScrollY = (0, import_react20.useRef)(0);
  const lastScrollX = (0, import_react20.useRef)(0);
  const scrollTimeout = (0, import_react20.useRef)(null);
  const handleScroll = (0, import_react20.useCallback)(() => {
    const target = ref.current ?? document.documentElement;
    const newScrollX = target.scrollLeft ?? window.scrollX;
    const newScrollY = target.scrollTop ?? window.scrollY;
    const maxScrollHeight = target.scrollHeight - target.clientHeight;
    const scrollPercentage = maxScrollHeight > 0 ? newScrollY / maxScrollHeight * 100 : 0;
    const directionX = newScrollX > lastScrollX.current ? "right" : newScrollX < lastScrollX.current ? "left" : "none";
    const directionY = newScrollY > lastScrollY.current ? "down" : newScrollY < lastScrollY.current ? "up" : "none";
    setScrollData({
      scrollX: newScrollX,
      scrollY: newScrollY,
      scrollDirection: directionY !== "none" ? directionY : directionX,
      isScrolling: true,
      scrollProgress: scrollPercentage
    });
    lastScrollX.current = newScrollX;
    lastScrollY.current = newScrollY;
    if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
    scrollTimeout.current = setTimeout(() => {
      setScrollData((prev) => ({ ...prev, isScrolling: false }));
    }, 150);
  }, []);
  (0, import_react20.useEffect)(() => {
    const target = ref.current ?? window;
    target.addEventListener("scroll", handleScroll, { passive: true });
    return () => target.removeEventListener("scroll", handleScroll);
  }, [handleScroll]);
  return { ref, ...scrollData };
}

// src/hooks/dom/useSize.ts
var import_react21 = require("react");
function useSize() {
  const ref = (0, import_react21.useRef)(null);
  const [size, setSize] = (0, import_react21.useState)(null);
  const updateSize = (0, import_react21.useCallback)((entries) => {
    const entry = entries[0];
    if (!entry) return;
    const { width, height, top, left, bottom, right } = entry.contentRect;
    setSize({ width, height, top, left, bottom, right });
  }, []);
  (0, import_react21.useEffect)(() => {
    const element = ref.current;
    if (!element) return;
    const observer = new ResizeObserver(updateSize);
    observer.observe(element);
    return () => observer.disconnect();
  }, [updateSize]);
  return { ref, size };
}

// src/hooks/dom/useWindowSize.ts
var import_react22 = require("react");
function useWindowSize() {
  const isSSR = typeof window === "undefined";
  const [size, setSize] = (0, import_react22.useState)({
    width: isSSR ? 0 : window.innerWidth,
    height: isSSR ? 0 : window.innerHeight
  });
  const updateSize = (0, import_react22.useCallback)(() => {
    setSize({ width: window.innerWidth, height: window.innerHeight });
  }, []);
  (0, import_react22.useLayoutEffect)(() => {
    if (isSSR) return;
    updateSize();
    window.addEventListener("resize", updateSize);
    return () => {
      window.removeEventListener("resize", updateSize);
    };
  }, [isSSR, updateSize]);
  return size;
}

// src/hooks/location/useGeoLocation.ts
var import_react23 = require("react");
function useGeoLocation(options) {
  const [loading, setLoading] = (0, import_react23.useState)(true);
  const [error, setError] = (0, import_react23.useState)(null);
  const [coords, setCoords] = (0, import_react23.useState)(null);
  const retriesRef = (0, import_react23.useRef)(0);
  const watchIdRef = (0, import_react23.useRef)(null);
  (0, import_react23.useEffect)(() => {
    if (!navigator.geolocation) {
      setError({
        code: 0,
        message: "Geolocation is not supported by this browser."
      });
      setLoading(false);
      return;
    }
    const {
      enableHighAccuracy = false,
      maximumAge = 0,
      timeout = 1e4,
      retryLimit = 3,
      retryDelay = 2e3
    } = options || {};
    const fetchLocation = () => {
      setLoading(true);
      const successCallback = (position) => {
        setCoords(position.coords);
        setError(null);
        setLoading(false);
        retriesRef.current = 0;
      };
      const errorCallback = (positionError) => {
        setError({ code: positionError.code, message: positionError.message });
        if (retriesRef.current < retryLimit) {
          retriesRef.current += 1;
          setTimeout(fetchLocation, retryDelay);
        } else {
          setLoading(false);
        }
      };
      watchIdRef.current = navigator.geolocation.watchPosition(
        successCallback,
        errorCallback,
        {
          enableHighAccuracy,
          maximumAge,
          timeout
        }
      );
    };
    fetchLocation();
    return () => {
      if (watchIdRef.current !== null) {
        navigator.geolocation.clearWatch(watchIdRef.current);
      }
    };
  }, [options]);
  return { loading, error, coords };
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  useAdvancedEffect,
  useArray,
  useClickOutside,
  useCopyToClipboard,
  useCounter,
  useDebounce,
  useEventListener,
  useFormState,
  useGeoLocation,
  useHistory,
  useHover,
  useInterval,
  useLocalStorage,
  useOnScreen,
  useOnlineStatus,
  usePress,
  usePrevious,
  useScrollInfo,
  useSessionStorage,
  useSize,
  useStorage,
  useTimeout,
  useToggle,
  useUpdatedEffect,
  useWindowSize
});