hookify-react/dist/index.js

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

// src/hooks/default/useAdvancedEffect.ts
import { useEffect, useRef } from "react";
function useAdvancedEffect(effect, deps) {
  const isFirstRender = useRef(true);
  const previousDepsRef = useRef(deps);
  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      previousDepsRef.current = deps;
      return;
    }
    const prevDeps = previousDepsRef.current;
    const hasDepsChanged = prevDeps.length !== deps.length || deps.some((dep, i) => !Object.is(dep, prevDeps[i]));
    if (hasDepsChanged) {
      previousDepsRef.current = deps;
      return effect();
    }
  }, deps);
}

// src/hooks/default/useUpdatedEffect.ts
import { useEffect as useEffect2, useRef as useRef2 } from "react";
function useUpdatedEffect(effect, deps) {
  const isFirstRender = useRef2(true);
  useEffect2(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    return effect();
  }, deps);
}

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

// src/hooks/state-management/useCounter.ts
import { useCallback as useCallback2, useRef as useRef4, useState as useState2 } from "react";
function useCounter(initialValue = 0, options = {}) {
  const { min, max } = options;
  const clamp = useCallback2(
    (value) => {
      let next = value;
      if (typeof min === "number") next = Math.max(min, next);
      if (typeof max === "number") next = Math.min(max, next);
      return next;
    },
    [min, max]
  );
  const [count, setCount] = useState2(() => clamp(initialValue));
  const initialValueRef = useRef4(initialValue);
  const increment = useCallback2(
    () => setCount((prev) => clamp(prev + 1)),
    [clamp]
  );
  const incrementByValue = useCallback2(
    (value) => setCount((prev) => clamp(prev + value)),
    [clamp]
  );
  const decrement = useCallback2(
    () => setCount((prev) => clamp(prev - 1)),
    [clamp]
  );
  const decrementByValue = useCallback2(
    (value) => setCount((prev) => clamp(prev - value)),
    [clamp]
  );
  const set = useCallback2((value) => setCount(clamp(value)), [clamp]);
  const reset = useCallback2(
    () => setCount(clamp(initialValueRef.current)),
    [clamp]
  );
  return {
    count,
    increment,
    incrementByValue,
    decrement,
    decrementByValue,
    set,
    reset
  };
}

// src/hooks/state-management/useFormState.ts
import {
  useCallback as useCallback3,
  useMemo,
  useRef as useRef5,
  useState as useState3
} from "react";
function useFormState(defaultValue, predicates, { emptyInputValidation = true } = {}) {
  const resolvedDefaultValueRef = useRef5(
    typeof defaultValue === "function" ? defaultValue() : defaultValue
  );
  const [state, setStateRaw] = useState3(resolvedDefaultValueRef.current);
  const [errors, setErrors] = useState3(
    () => predicates.map((predicate) => predicate(resolvedDefaultValueRef.current))
  );
  const stateRef = useRef5(state);
  stateRef.current = state;
  const predicatesRef = useRef5(predicates);
  predicatesRef.current = predicates;
  const emptyValidationRef = useRef5(emptyInputValidation);
  emptyValidationRef.current = emptyInputValidation;
  const setValue = useCallback3((value) => {
    const newValue = typeof value === "function" ? value(stateRef.current) : value;
    setStateRaw(newValue);
    if (typeof newValue === "string" && newValue.length === 0 && !emptyValidationRef.current) {
      setErrors([]);
      return;
    }
    const newErrors = predicatesRef.current.map((p) => p(newValue));
    setErrors(
      (prevErrors) => prevErrors.length === newErrors.length && prevErrors.every((e, i) => e === newErrors[i]) ? prevErrors : newErrors
    );
  }, []);
  const filteredErrors = useMemo(
    () => errors.filter((error) => Boolean(error)),
    [errors]
  );
  const isValid = filteredErrors.length === 0;
  const status = 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
import { useCallback as useCallback4, useRef as useRef6, useState as useState4 } from "react";
function useHistory(defaultValue, { capacity = 10 } = {}) {
  const resolvedDefaultValue = typeof defaultValue === "function" ? defaultValue() : defaultValue;
  const [state, setState] = useState4(resolvedDefaultValue);
  const historyRef = useRef6([resolvedDefaultValue]);
  const pointerRef = useRef6(0);
  const set = useCallback4(
    (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 = useCallback4(() => {
    if (pointerRef.current > 0) {
      pointerRef.current--;
      setState(historyRef.current[pointerRef.current]);
    }
  }, []);
  const forward = useCallback4(() => {
    if (pointerRef.current < historyRef.current.length - 1) {
      pointerRef.current++;
      setState(historyRef.current[pointerRef.current]);
    }
  }, []);
  const go = useCallback4((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
import { useEffect as useEffect3, useRef as useRef7 } from "react";
function usePrevious(value) {
  const ref = useRef7(null);
  useEffect3(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

// src/hooks/state-management/useToggle.ts
import { useCallback as useCallback5, useState as useState5 } from "react";
function useToggle(initialValue = false) {
  const [state, setState] = useState5(initialValue);
  const toggle = useCallback5((value) => {
    setState((prev) => typeof value === "boolean" ? value : !prev);
  }, []);
  return [state, toggle];
}

// src/hooks/async-management/useDebounce.ts
import { useEffect as useEffect5 } from "react";

// src/hooks/utils/index.ts
import { useCallback as useCallback6, useEffect as useEffect4, useLayoutEffect, useRef as useRef8 } from "react";
var isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined";
var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect4;
function useLatest(value) {
  const ref = useRef8(value);
  useIsomorphicLayoutEffect(() => {
    ref.current = value;
  }, [value]);
  return ref;
}

// src/hooks/async-management/useDebounce.ts
function useDebounce(callback, delay, deps) {
  const callbackRef = useLatest(callback);
  useEffect5(() => {
    const timer = setTimeout(() => callbackRef.current(), delay);
    return () => clearTimeout(timer);
  }, [...deps, delay]);
}

// src/hooks/async-management/useTimeout.ts
import { useCallback as useCallback7, useEffect as useEffect6, useRef as useRef9 } from "react";
function useTimeout(callback, delay) {
  const callbackRef = useLatest(callback);
  const timeoutRef = useRef9(null);
  const clear = useCallback7(() => {
    if (timeoutRef.current !== null) {
      clearTimeout(timeoutRef.current);
      timeoutRef.current = null;
    }
  }, []);
  const set = useCallback7(() => {
    clear();
    timeoutRef.current = setTimeout(() => {
      timeoutRef.current = null;
      callbackRef.current();
    }, delay);
  }, [delay, clear, callbackRef]);
  const reset = useCallback7(() => {
    set();
  }, [set]);
  useEffect6(() => {
    set();
    return clear;
  }, [set, clear]);
  return { set, clear, reset };
}

// src/hooks/async-management/useInterval.ts
import { useCallback as useCallback8, useEffect as useEffect7, useRef as useRef10 } from "react";
function useInterval(callback, interval = 1e3) {
  const callbackRef = useLatest(callback);
  const intervalRef = useRef10(null);
  const clear = useCallback8(() => {
    if (intervalRef.current !== null) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  }, []);
  useEffect7(() => {
    if (interval === null) return;
    intervalRef.current = setInterval(() => callbackRef.current(), interval);
    return () => {
      if (intervalRef.current !== null) {
        clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
    };
  }, [interval, callbackRef]);
  return { clear };
}

// src/hooks/storage/useStorage.ts
import {
  useCallback as useCallback9,
  useEffect as useEffect8,
  useRef as useRef11,
  useState as useState6
} from "react";
function getStorage(type) {
  if (!isBrowser) return null;
  try {
    return type === "local" ? window.localStorage : window.sessionStorage;
  } catch {
    return null;
  }
}
function useStorage(key, defaultValue, type) {
  const readDefault = useCallback9(
    () => typeof defaultValue === "function" ? defaultValue() : defaultValue,
    [defaultValue]
  );
  const [value, setValue] = useState6(() => {
    const storage = getStorage(type);
    if (storage) {
      try {
        const stored = storage.getItem(key);
        if (stored !== null) return JSON.parse(stored);
      } catch (error) {
        console.error(`useStorage: failed to read key "${key}"`, error);
      }
    }
    return readDefault();
  });
  const valueRef = useRef11(value);
  valueRef.current = value;
  useEffect8(() => {
    const storage = getStorage(type);
    if (!storage) return;
    try {
      if (value === void 0) {
        storage.removeItem(key);
      } else {
        storage.setItem(key, JSON.stringify(value));
      }
    } catch (error) {
      console.error(`useStorage: failed to write key "${key}"`, error);
    }
  }, [key, value, type]);
  useEffect8(() => {
    if (!isBrowser || type !== "local") return;
    const handleStorage = (event) => {
      if (event.storageArea !== window.localStorage || event.key !== key) {
        return;
      }
      try {
        const next = event.newValue === null ? readDefault() : JSON.parse(event.newValue);
        setValue(next);
      } catch (error) {
        console.error(`useStorage: failed to sync key "${key}"`, error);
      }
    };
    window.addEventListener("storage", handleStorage);
    return () => window.removeEventListener("storage", handleStorage);
  }, [key, type, readDefault]);
  return [value, setValue];
}
function useLocalStorage(key, defaultValue) {
  return useStorage(key, defaultValue, "local");
}
function useSessionStorage(key, defaultValue) {
  return useStorage(key, defaultValue, "session");
}

// src/hooks/dom/useCopyToClipboard.ts
import { useCallback as useCallback10, useEffect as useEffect9, useRef as useRef12, useState as useState7 } from "react";
function useCopyToClipboard(resetDelay = 2e3) {
  const [isCopied, setIsCopied] = useState7(false);
  const [error, setError] = useState7(null);
  const resetTimerRef = useRef12(null);
  useEffect9(() => {
    return () => {
      if (resetTimerRef.current !== null) {
        clearTimeout(resetTimerRef.current);
      }
    };
  }, []);
  const copy = useCallback10(
    async (text) => {
      try {
        if (navigator?.clipboard?.writeText) {
          await navigator.clipboard.writeText(text);
        } else if (typeof document !== "undefined" && typeof document.execCommand === "function") {
          const textarea = document.createElement("textarea");
          textarea.value = text;
          textarea.style.position = "fixed";
          textarea.style.opacity = "0";
          document.body.appendChild(textarea);
          textarea.focus();
          textarea.select();
          const succeeded = document.execCommand("copy");
          document.body.removeChild(textarea);
          if (!succeeded) throw new Error("Copy command was unsuccessful");
        } else {
          throw new Error("Clipboard API not available");
        }
        setIsCopied(true);
        setError(null);
        if (resetDelay > 0) {
          if (resetTimerRef.current !== null) {
            clearTimeout(resetTimerRef.current);
          }
          resetTimerRef.current = setTimeout(
            () => setIsCopied(false),
            resetDelay
          );
        }
        return true;
      } catch (err) {
        setError(err instanceof Error ? err : new Error(String(err)));
        setIsCopied(false);
        return false;
      }
    },
    [resetDelay]
  );
  return { copy, isCopied, error };
}

// src/hooks/dom/useEventListener.ts
import { useEffect as useEffect10, useRef as useRef13 } from "react";
function useEventListener(eventType, callback, elementRef, options) {
  const callbackRef = useLatest(callback);
  const optionsRef = useRef13(options);
  optionsRef.current = options;
  useEffect10(() => {
    const target = elementRef?.current ?? (typeof window !== "undefined" ? window : null);
    if (!target?.addEventListener) return;
    const currentOptions = optionsRef.current;
    const handleEvent = (event) => callbackRef.current(event);
    target.addEventListener(eventType, handleEvent, currentOptions);
    return () => {
      target.removeEventListener(eventType, handleEvent, currentOptions);
    };
  }, [eventType, elementRef, callbackRef]);
}

// src/hooks/dom/useHover.ts
import { useRef as useRef14, useState as useState8, useCallback as useCallback11 } from "react";
function useHover() {
  const [isHovered, setIsHovered] = useState8(false);
  const ref = useRef14(null);
  const handleHover = useCallback11(
    (event) => setIsHovered(event.type === "mouseenter"),
    []
  );
  useEventListener("mouseenter", handleHover, ref);
  useEventListener("mouseleave", handleHover, ref);
  return { ref, isHovered };
}

// src/hooks/dom/useOnClickOutside.ts
import { useCallback as useCallback12, useRef as useRef15 } from "react";
function useClickOutside(callback) {
  const ref = useRef15(null);
  const documentRef = useRef15(isBrowser ? document : null);
  const handleClick = useCallback12(
    (event) => {
      const element = ref.current;
      if (!element || element.contains(event.target)) return;
      callback(event);
    },
    [callback]
  );
  useEventListener("mousedown", handleClick, documentRef);
  useEventListener("touchstart", handleClick, documentRef);
  return { ref };
}

// src/hooks/dom/useOnlineStatus.ts
import { useState as useState9 } from "react";
function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState9(
    () => isBrowser ? navigator.onLine : true
  );
  useEventListener("online", () => setIsOnline(true));
  useEventListener("offline", () => setIsOnline(false));
  return { isOnline, onlineStatus: isOnline ? "online" : "offline" };
}

// src/hooks/dom/useOnScreen.ts
import { useEffect as useEffect11, useRef as useRef16, useState as useState10 } from "react";
function useOnScreen(options = "0px") {
  const {
    rootMargin = "0px",
    threshold = 0,
    once = false
  } = typeof options === "string" ? { rootMargin: options } : options;
  const [isVisible, setIsVisible] = useState10(false);
  const ref = useRef16(null);
  useEffect11(() => {
    const target = ref.current;
    if (!target || typeof IntersectionObserver === "undefined") return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (!entry) return;
        setIsVisible(entry.isIntersecting);
        if (entry.isIntersecting && once) observer.disconnect();
      },
      { rootMargin, threshold }
    );
    observer.observe(target);
    return () => observer.disconnect();
  }, [rootMargin, threshold, once]);
  return { ref, isVisible };
}

// src/hooks/dom/usePress.ts
import { useRef as useRef17, useState as useState11 } from "react";
function usePress() {
  const [isPressed, setIsPressed] = useState11(false);
  const ref = useRef17(null);
  const press = () => setIsPressed(true);
  const release = () => setIsPressed(false);
  useEventListener("mousedown", press, ref);
  useEventListener("touchstart", press, ref);
  useEventListener("mouseleave", release, ref);
  useEventListener("mouseup", release);
  useEventListener("touchend", release);
  return { isPressed, ref };
}

// src/hooks/dom/useScrollPosition.ts
import { useState as useState12, useEffect as useEffect12, useRef as useRef18, useCallback as useCallback13 } from "react";
function useScrollInfo() {
  const ref = useRef18(null);
  const [scrollData, setScrollData] = useState12({
    scrollX: 0,
    scrollY: 0,
    scrollDirection: "none",
    isScrolling: false,
    scrollProgress: 0
  });
  const lastScrollY = useRef18(0);
  const lastScrollX = useRef18(0);
  const scrollTimeout = useRef18(null);
  const handleScroll = useCallback13(() => {
    const element = ref.current;
    const metricsSource = element ?? document.documentElement;
    const newScrollX = element ? element.scrollLeft : window.scrollX;
    const newScrollY = element ? element.scrollTop : window.scrollY;
    const maxScrollHeight = metricsSource.scrollHeight - metricsSource.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);
  }, []);
  useEffect12(() => {
    const target = ref.current ?? window;
    target.addEventListener("scroll", handleScroll, { passive: true });
    return () => {
      target.removeEventListener("scroll", handleScroll);
      if (scrollTimeout.current) {
        clearTimeout(scrollTimeout.current);
        scrollTimeout.current = null;
      }
    };
  }, [handleScroll]);
  return { ref, ...scrollData };
}

// src/hooks/dom/useSize.ts
import { useEffect as useEffect13, useRef as useRef19, useState as useState13, useCallback as useCallback14 } from "react";
function useSize() {
  const ref = useRef19(null);
  const [size, setSize] = useState13(null);
  const updateSize = useCallback14((entries) => {
    const entry = entries[0];
    if (!entry) return;
    const { width, height, top, left, bottom, right } = entry.contentRect;
    setSize({ width, height, top, left, bottom, right });
  }, []);
  useEffect13(() => {
    const element = ref.current;
    if (!element || typeof ResizeObserver === "undefined") return;
    const rect = element.getBoundingClientRect();
    setSize({
      width: rect.width,
      height: rect.height,
      top: rect.top,
      left: rect.left,
      bottom: rect.bottom,
      right: rect.right
    });
    const observer = new ResizeObserver(updateSize);
    observer.observe(element);
    return () => observer.disconnect();
  }, [updateSize]);
  return { ref, size };
}

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

// src/hooks/location/useGeoLocation.ts
import { useEffect as useEffect14, useRef as useRef20, useState as useState15 } from "react";
function useGeoLocation(options = {}) {
  const {
    enableHighAccuracy = false,
    maximumAge = 0,
    timeout = 1e4,
    retryLimit = 3,
    retryDelay = 2e3
  } = options;
  const [loading, setLoading] = useState15(true);
  const [error, setError] = useState15(null);
  const [coords, setCoords] = useState15(null);
  const retriesRef = useRef20(0);
  const watchIdRef = useRef20(null);
  const retryTimerRef = useRef20(null);
  useEffect14(() => {
    if (typeof navigator === "undefined" || !navigator.geolocation) {
      setError({
        code: 0,
        message: "Geolocation is not supported by this browser."
      });
      setLoading(false);
      return;
    }
    let cancelled = false;
    retriesRef.current = 0;
    const fetchLocation = () => {
      if (cancelled) return;
      setLoading(true);
      const successCallback = (position) => {
        if (cancelled) return;
        setCoords(position.coords);
        setError(null);
        setLoading(false);
        retriesRef.current = 0;
      };
      const errorCallback = (positionError) => {
        if (cancelled) return;
        setError({ code: positionError.code, message: positionError.message });
        if (retriesRef.current < retryLimit) {
          retriesRef.current += 1;
          retryTimerRef.current = setTimeout(fetchLocation, retryDelay);
        } else {
          setLoading(false);
        }
      };
      watchIdRef.current = navigator.geolocation.watchPosition(
        successCallback,
        errorCallback,
        { enableHighAccuracy, maximumAge, timeout }
      );
    };
    fetchLocation();
    return () => {
      cancelled = true;
      if (watchIdRef.current !== null) {
        navigator.geolocation.clearWatch(watchIdRef.current);
        watchIdRef.current = null;
      }
      if (retryTimerRef.current !== null) {
        clearTimeout(retryTimerRef.current);
        retryTimerRef.current = null;
      }
    };
  }, [enableHighAccuracy, maximumAge, timeout, retryLimit, retryDelay]);
  return { loading, error, coords };
}
export {
  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
};