@jbpark/use-hooks 2.1.0 → 2.2.1

package/dist/hooks/useScrollToElements/index.mjs

@@ -1,34 +0,0 @@
-import { useCallback, useRef } from "react";
-
-//#region src/hooks/useScrollToElements/index.ts
-const useScrollToElements = (options) => {
-	const elementRefs = useRef([]);
-	const scrollToElement = useCallback((index) => {
-		if (elementRefs.current[index]) {
-			elementRefs.current[index].scrollIntoView({
-				behavior: "smooth",
-				block: "start",
-				inline: "start",
-				...options
-			});
-			if (options?.offset) {
-				const top = elementRefs.current[index].getBoundingClientRect().top + window.scrollY - options.offset;
-				window.scrollTo({
-					top,
-					behavior: options.behavior || "smooth"
-				});
-			}
-		}
-	}, [options]);
-	return {
-		elementRefs,
-		setElementRef: useCallback((element, index) => {
-			elementRefs.current[index] = element;
-		}, []),
-		scrollToElement
-	};
-};
-
-//#endregion
-export { useScrollToElements as default };
-//# sourceMappingURL=index.mjs.map

package/dist/hooks/useScrollToElements/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/hooks/useScrollToElements/index.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\ninterface Options extends ScrollIntoViewOptions {\n  offset?: number;\n}\nconst useScrollToElements = (options?: Options) => {\n  const elementRefs = useRef<HTMLElement[]>([]);\n\n  const scrollToElement = useCallback(\n    (index: number) => {\n      if (elementRefs.current[index]) {\n        elementRefs.current[index].scrollIntoView({\n          behavior: 'smooth',\n          block: 'start',\n          inline: 'start',\n          ...options,\n        });\n\n        if (options?.offset) {\n          const top =\n            elementRefs.current[index].getBoundingClientRect().top +\n            window.scrollY -\n            options.offset;\n\n          window.scrollTo({\n            top,\n            behavior: options.behavior || 'smooth',\n          });\n        }\n      }\n    },\n    [options],\n  );\n\n  const setElementRef = useCallback((element: HTMLElement, index: number) => {\n    elementRefs.current[index] = element;\n  }, []);\n\n  return { elementRefs, setElementRef, scrollToElement };\n};\n\nexport default useScrollToElements;\n"],"mappings":";;;AAKA,MAAM,uBAAuB,YAAsB;CACjD,MAAM,cAAc,OAAsB,EAAE,CAAC;CAE7C,MAAM,kBAAkB,aACrB,UAAkB;AACjB,MAAI,YAAY,QAAQ,QAAQ;AAC9B,eAAY,QAAQ,OAAO,eAAe;IACxC,UAAU;IACV,OAAO;IACP,QAAQ;IACR,GAAG;IACJ,CAAC;AAEF,OAAI,SAAS,QAAQ;IACnB,MAAM,MACJ,YAAY,QAAQ,OAAO,uBAAuB,CAAC,MACnD,OAAO,UACP,QAAQ;AAEV,WAAO,SAAS;KACd;KACA,UAAU,QAAQ,YAAY;KAC/B,CAAC;;;IAIR,CAAC,QAAQ,CACV;AAMD,QAAO;EAAE;EAAa,eAJA,aAAa,SAAsB,UAAkB;AACzE,eAAY,QAAQ,SAAS;KAC5B,EAAE,CAAC;EAE+B;EAAiB"}

package/dist/hooks/useThrottle/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/hooks/useThrottle/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst useThrottle = <T>(value: T, delay = 100): T => {\n  const [throttledValue, setThrottledValue] = useState(value);\n  const lastExecutedRef = useRef(0);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const latestValueRef = useRef(value);\n\n  useEffect(() => {\n    latestValueRef.current = value;\n  }, [value]);\n\n  useEffect(() => {\n    const now = Date.now();\n    const elapsed = now - lastExecutedRef.current;\n\n    if (elapsed >= delay) {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n        timeoutRef.current = null;\n      }\n\n      lastExecutedRef.current = now;\n      setThrottledValue(latestValueRef.current);\n      return;\n    }\n\n    const remaining = delay - elapsed;\n\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n\n    timeoutRef.current = setTimeout(() => {\n      lastExecutedRef.current = Date.now();\n      setThrottledValue(latestValueRef.current);\n    }, remaining);\n\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n        timeoutRef.current = null;\n      }\n    };\n  }, [value, delay]);\n\n  return throttledValue;\n};\n\nexport default useThrottle;\n"],"mappings":";;;AAEA,MAAM,eAAkB,OAAU,QAAQ,QAAW;CACnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAC3D,MAAM,kBAAkB,OAAO,EAAE;CACjC,MAAM,aAAa,OAA6C,KAAK;CACrE,MAAM,iBAAiB,OAAO,MAAM;AAEpC,iBAAgB;AACd,iBAAe,UAAU;IACxB,CAAC,MAAM,CAAC;AAEX,iBAAgB;EACd,MAAM,MAAM,KAAK,KAAK;EACtB,MAAM,UAAU,MAAM,gBAAgB;AAEtC,MAAI,WAAW,OAAO;AACpB,OAAI,WAAW,SAAS;AACtB,iBAAa,WAAW,QAAQ;AAChC,eAAW,UAAU;;AAGvB,mBAAgB,UAAU;AAC1B,qBAAkB,eAAe,QAAQ;AACzC;;EAGF,MAAM,YAAY,QAAQ;AAE1B,MAAI,WAAW,QACb,cAAa,WAAW,QAAQ;AAGlC,aAAW,UAAU,iBAAiB;AACpC,mBAAgB,UAAU,KAAK,KAAK;AACpC,qBAAkB,eAAe,QAAQ;KACxC,UAAU;AAEb,eAAa;AACX,OAAI,WAAW,SAAS;AACtB,iBAAa,WAAW,QAAQ;AAChC,eAAW,UAAU;;;IAGxB,CAAC,OAAO,MAAM,CAAC;AAElB,QAAO"}

package/dist/hooks/useViewport/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/hooks/useViewport/index.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\ntype ViewportInfo =\n  | VisualViewport\n  | {\n      width: number;\n      height: number;\n      offsetLeft: number;\n      offsetTop: number;\n      pageLeft: number;\n      pageTop: number;\n      scale: number;\n    };\n\ninterface Options {\n  isInApp?: boolean;\n  debounce?: number;\n}\n\nconst useViewport = (options: Options = {}) => {\n  const { isInApp = false, debounce = 100 } = options;\n\n  const [viewport, setViewport] = useState<ViewportInfo>({\n    width: 0,\n    height: 0,\n    offsetLeft: 0,\n    offsetTop: 0,\n    pageLeft: 0,\n    pageTop: 0,\n    scale: 1,\n  });\n\n  const getAppViewHeight = useCallback(() => {\n    const windowHeight = window.innerHeight;\n    const visualHeight = window.visualViewport?.height || windowHeight;\n    const documentHeight = document.documentElement.clientHeight;\n    const bodyHeight = document.body.clientHeight;\n\n    if (window.visualViewport && Math.abs(visualHeight - windowHeight) > 100) {\n      return visualHeight;\n    }\n\n    return Math.max(windowHeight, documentHeight, bodyHeight);\n  }, []);\n\n  const readViewport = useCallback((): ViewportInfo => {\n    if (window.visualViewport && !isInApp) {\n      return window.visualViewport;\n    }\n\n    const width = window.visualViewport?.width || window.innerWidth;\n    const height = isInApp\n      ? getAppViewHeight()\n      : window.visualViewport?.height || window.innerHeight;\n\n    return {\n      width,\n      height,\n      offsetLeft: window.visualViewport?.offsetLeft || 0,\n      offsetTop: window.visualViewport?.offsetTop || 0,\n      pageLeft: window.scrollX ?? window.pageXOffset ?? 0,\n      pageTop: window.scrollY ?? window.pageYOffset ?? 0,\n      scale: window.visualViewport?.scale || 1,\n    };\n  }, [isInApp, getAppViewHeight]);\n\n  useEffect(() => {\n    let timeoutId: NodeJS.Timeout;\n\n    const debouncedUpdate = () => {\n      clearTimeout(timeoutId);\n      timeoutId = setTimeout(() => {\n        setViewport(readViewport());\n      }, debounce);\n    };\n\n    const immediateUpdate = () => setViewport(readViewport());\n\n    immediateUpdate();\n\n    const events = ['resize', 'orientationchange'];\n\n    if (isInApp) {\n      events.push('focus', 'blur', 'touchstart', 'touchend');\n    }\n\n    events.forEach(event => {\n      if (event === 'resize' || event === 'orientationchange') {\n        window.addEventListener(event, debouncedUpdate);\n      } else {\n        window.addEventListener(event, immediateUpdate, { passive: true });\n      }\n    });\n\n    if (window.visualViewport) {\n      window.visualViewport.addEventListener('resize', immediateUpdate);\n      window.visualViewport.addEventListener('scroll', immediateUpdate);\n    }\n\n    let intervalId: NodeJS.Timeout;\n    if (isInApp) {\n      let lastHeight = readViewport().height;\n      intervalId = setInterval(() => {\n        const currentHeight = readViewport().height;\n        if (Math.abs(currentHeight - lastHeight) > 50) {\n          lastHeight = currentHeight;\n          immediateUpdate();\n        }\n      }, 500);\n    }\n\n    return () => {\n      clearTimeout(timeoutId);\n      if (intervalId) clearInterval(intervalId);\n\n      events.forEach(event => {\n        window.removeEventListener(\n          event,\n          event === 'resize' || event === 'orientationchange'\n            ? debouncedUpdate\n            : immediateUpdate,\n        );\n      });\n\n      if (window.visualViewport) {\n        window.visualViewport.removeEventListener('resize', immediateUpdate);\n        window.visualViewport.removeEventListener('scroll', immediateUpdate);\n      }\n    };\n  }, [readViewport, isInApp, debounce]);\n\n  return viewport;\n};\n\nexport default useViewport;\n"],"mappings":";;;AAmBA,MAAM,eAAe,UAAmB,EAAE,KAAK;CAC7C,MAAM,EAAE,UAAU,OAAO,WAAW,QAAQ;CAE5C,MAAM,CAAC,UAAU,eAAe,SAAuB;EACrD,OAAO;EACP,QAAQ;EACR,YAAY;EACZ,WAAW;EACX,UAAU;EACV,SAAS;EACT,OAAO;EACR,CAAC;CAEF,MAAM,mBAAmB,kBAAkB;EACzC,MAAM,eAAe,OAAO;EAC5B,MAAM,eAAe,OAAO,gBAAgB,UAAU;EACtD,MAAM,iBAAiB,SAAS,gBAAgB;EAChD,MAAM,aAAa,SAAS,KAAK;AAEjC,MAAI,OAAO,kBAAkB,KAAK,IAAI,eAAe,aAAa,GAAG,IACnE,QAAO;AAGT,SAAO,KAAK,IAAI,cAAc,gBAAgB,WAAW;IACxD,EAAE,CAAC;CAEN,MAAM,eAAe,kBAAgC;AACnD,MAAI,OAAO,kBAAkB,CAAC,QAC5B,QAAO,OAAO;AAQhB,SAAO;GACL,OANY,OAAO,gBAAgB,SAAS,OAAO;GAOnD,QANa,UACX,kBAAkB,GAClB,OAAO,gBAAgB,UAAU,OAAO;GAK1C,YAAY,OAAO,gBAAgB,cAAc;GACjD,WAAW,OAAO,gBAAgB,aAAa;GAC/C,UAAU,OAAO,WAAW,OAAO,eAAe;GAClD,SAAS,OAAO,WAAW,OAAO,eAAe;GACjD,OAAO,OAAO,gBAAgB,SAAS;GACxC;IACA,CAAC,SAAS,iBAAiB,CAAC;AAE/B,iBAAgB;EACd,IAAI;EAEJ,MAAM,wBAAwB;AAC5B,gBAAa,UAAU;AACvB,eAAY,iBAAiB;AAC3B,gBAAY,cAAc,CAAC;MAC1B,SAAS;;EAGd,MAAM,wBAAwB,YAAY,cAAc,CAAC;AAEzD,mBAAiB;EAEjB,MAAM,SAAS,CAAC,UAAU,oBAAoB;AAE9C,MAAI,QACF,QAAO,KAAK,SAAS,QAAQ,cAAc,WAAW;AAGxD,SAAO,SAAQ,UAAS;AACtB,OAAI,UAAU,YAAY,UAAU,oBAClC,QAAO,iBAAiB,OAAO,gBAAgB;OAE/C,QAAO,iBAAiB,OAAO,iBAAiB,EAAE,SAAS,MAAM,CAAC;IAEpE;AAEF,MAAI,OAAO,gBAAgB;AACzB,UAAO,eAAe,iBAAiB,UAAU,gBAAgB;AACjE,UAAO,eAAe,iBAAiB,UAAU,gBAAgB;;EAGnE,IAAI;AACJ,MAAI,SAAS;GACX,IAAI,aAAa,cAAc,CAAC;AAChC,gBAAa,kBAAkB;IAC7B,MAAM,gBAAgB,cAAc,CAAC;AACrC,QAAI,KAAK,IAAI,gBAAgB,WAAW,GAAG,IAAI;AAC7C,kBAAa;AACb,sBAAiB;;MAElB,IAAI;;AAGT,eAAa;AACX,gBAAa,UAAU;AACvB,OAAI,WAAY,eAAc,WAAW;AAEzC,UAAO,SAAQ,UAAS;AACtB,WAAO,oBACL,OACA,UAAU,YAAY,UAAU,sBAC5B,kBACA,gBACL;KACD;AAEF,OAAI,OAAO,gBAAgB;AACzB,WAAO,eAAe,oBAAoB,UAAU,gBAAgB;AACpE,WAAO,eAAe,oBAAoB,UAAU,gBAAgB;;;IAGvE;EAAC;EAAc;EAAS;EAAS,CAAC;AAErC,QAAO"}

package/dist/hooks/useWindowScroll/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/hooks/useWindowScroll/index.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst useWindowScroll = () => {\n  const [state, setState] = useState({\n    x: 0,\n    y: 0,\n    percent: {\n      x: 0,\n      y: 0,\n    },\n  });\n\n  useEffect(() => {\n    const calculate = () => {\n      const x = window.scrollX || 0;\n      const y = window.scrollY || 0;\n\n      const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);\n      const visualViewport = window.visualViewport;\n\n      const viewportWidth =\n        isIOS && visualViewport ? visualViewport.width : window.innerWidth;\n\n      const viewportHeight =\n        isIOS && visualViewport ? visualViewport.height : window.innerHeight;\n\n      const maxScrollX = Math.max(\n        0,\n        document.documentElement.scrollWidth - viewportWidth,\n      );\n      const maxScrollY = Math.max(\n        0,\n        document.documentElement.scrollHeight - viewportHeight,\n      );\n\n      const percentX =\n        maxScrollX === 0 ? 0 : Math.min(100, (x / maxScrollX) * 100);\n      const percentY =\n        maxScrollY === 0 ? 0 : Math.min(100, (y / maxScrollY) * 100);\n\n      setState({\n        x,\n        y,\n        percent: {\n          x: Math.floor(Math.max(0, percentX)),\n          y: Math.floor(Math.max(0, percentY)),\n        },\n      });\n    };\n\n    calculate();\n\n    const onScroll = () => {\n      calculate();\n    };\n\n    const onResize = () => {\n      setTimeout(calculate, 100);\n    };\n\n    const onVisualViewportChange = () => {\n      setTimeout(calculate, 50);\n    };\n\n    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('resize', onResize);\n    window.addEventListener('orientationchange', onResize);\n\n    if (window.visualViewport) {\n      window.visualViewport.addEventListener('resize', onVisualViewportChange);\n    }\n\n    return () => {\n      window.removeEventListener('scroll', onScroll);\n      window.removeEventListener('resize', onResize);\n      window.removeEventListener('orientationchange', onResize);\n\n      if (window.visualViewport) {\n        window.visualViewport.removeEventListener(\n          'resize',\n          onVisualViewportChange,\n        );\n      }\n    };\n  }, []);\n\n  return state;\n};\n\nexport default useWindowScroll;\n"],"mappings":";;;AAEA,MAAM,wBAAwB;CAC5B,MAAM,CAAC,OAAO,YAAY,SAAS;EACjC,GAAG;EACH,GAAG;EACH,SAAS;GACP,GAAG;GACH,GAAG;GACJ;EACF,CAAC;AAEF,iBAAgB;EACd,MAAM,kBAAkB;GACtB,MAAM,IAAI,OAAO,WAAW;GAC5B,MAAM,IAAI,OAAO,WAAW;GAE5B,MAAM,QAAQ,mBAAmB,KAAK,UAAU,UAAU;GAC1D,MAAM,iBAAiB,OAAO;GAE9B,MAAM,gBACJ,SAAS,iBAAiB,eAAe,QAAQ,OAAO;GAE1D,MAAM,iBACJ,SAAS,iBAAiB,eAAe,SAAS,OAAO;GAE3D,MAAM,aAAa,KAAK,IACtB,GACA,SAAS,gBAAgB,cAAc,cACxC;GACD,MAAM,aAAa,KAAK,IACtB,GACA,SAAS,gBAAgB,eAAe,eACzC;GAED,MAAM,WACJ,eAAe,IAAI,IAAI,KAAK,IAAI,KAAM,IAAI,aAAc,IAAI;GAC9D,MAAM,WACJ,eAAe,IAAI,IAAI,KAAK,IAAI,KAAM,IAAI,aAAc,IAAI;AAE9D,YAAS;IACP;IACA;IACA,SAAS;KACP,GAAG,KAAK,MAAM,KAAK,IAAI,GAAG,SAAS,CAAC;KACpC,GAAG,KAAK,MAAM,KAAK,IAAI,GAAG,SAAS,CAAC;KACrC;IACF,CAAC;;AAGJ,aAAW;EAEX,MAAM,iBAAiB;AACrB,cAAW;;EAGb,MAAM,iBAAiB;AACrB,cAAW,WAAW,IAAI;;EAG5B,MAAM,+BAA+B;AACnC,cAAW,WAAW,GAAG;;AAG3B,SAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM,CAAC;AAC9D,SAAO,iBAAiB,UAAU,SAAS;AAC3C,SAAO,iBAAiB,qBAAqB,SAAS;AAEtD,MAAI,OAAO,eACT,QAAO,eAAe,iBAAiB,UAAU,uBAAuB;AAG1E,eAAa;AACX,UAAO,oBAAoB,UAAU,SAAS;AAC9C,UAAO,oBAAoB,UAAU,SAAS;AAC9C,UAAO,oBAAoB,qBAAqB,SAAS;AAEzD,OAAI,OAAO,eACT,QAAO,eAAe,oBACpB,UACA,uBACD;;IAGJ,EAAE,CAAC;AAEN,QAAO"}