@jbpark/use-hooks 2.0.0 → 2.0.2

package/README.md

@@ -11,7 +11,7 @@ A collection of reusable React 19 hooks for common UI and interaction patterns.
 
 ## Features
 
-- 📦 **10 Production-Ready Hooks** - Utilities for scrolling, viewport, storage, and more
+- 📦 **11 Production-Ready Hooks** - Utilities for scrolling, viewport, storage, and more
 - 🎯 **Full TypeScript Support** - Complete type definitions for better development experience
 - ⚡ **Tree-Shakeable** - Import only what you need
 - 🔒 **SSR-Safe** - Built-in protection for window/document globals
@@ -74,6 +74,7 @@ function MyComponent() {
 | `useImage`            | Preload images and expose loading/error states                              |
 | `useRecursiveTimeout` | Recursively schedule async/sync callbacks                                   |
 | `useViewport`         | visualViewport support with in-app mode option and debounce                 |
+| `useDebounce`         | Delay function execution to prevent excessive updates (autoInvoke support)  |
 
 ## Development
 
@@ -100,6 +101,7 @@ pnpm exec prettier --write .
 src/
 ├── hooks/                      # Individual hook implementations
 │   ├── useBodyScrollLock/
+│   ├── useDebounce/
 │   ├── useElementPosition/
 │   ├── useElementScroll/
 │   ├── useImage/

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),E=(e,{delay:o=100,autoInvoke:d=!0},t=[])=>{const s=n.useRef(null),c=n.useRef(e),i=n.useRef(t),l=n.useRef(void 0);n.useEffect(()=>{c.current=e}),n.useEffect(()=>{i.current=t});const r=n.useRef(null);return r.current||(r.current=((...u)=>{s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{c.current(...u)},o)})),n.useEffect(()=>{const u=l.current===void 0||l.current.length!==t.length||l.current.some((a,w)=>a!==t[w]);u&&s.current&&clearTimeout(s.current),d&&u&&(l.current===void 0?c.current():r.current&&r.current()),l.current=t}),n.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]),r.current},S=(e=!0)=>{n.useEffect(()=>{if(!e)return;const o=window.scrollY,d=/iPad|iPhone|iPod/.test(navigator.userAgent),t={documentElement:{overflow:document.documentElement.style.overflow,height:document.documentElement.style.height,position:document.documentElement.style.position,width:document.documentElement.style.width},body:{overflow:document.body.style.overflow,height:document.body.style.height,position:document.body.style.position,top:document.body.style.top,left:document.body.style.left,right:document.body.style.right,width:document.body.style.width,webkitOverflowScrolling:document.body.style.getPropertyValue("-webkit-overflow-scrolling")}};if(document.documentElement.style.overflow="hidden",document.documentElement.style.height="100%",document.documentElement.style.position="fixed",document.documentElement.style.width="100%",document.body.style.overflow="hidden",document.body.style.height="100%",document.body.style.position="fixed",document.body.style.top=`-${o}px`,document.body.style.left="0",document.body.style.right="0",document.body.style.width="100%",d){document.body.style.setProperty("-webkit-overflow-scrolling","touch");const s=r=>{(r.target===document.body||r.target===document.documentElement||r.target===window)&&(r.preventDefault(),r.stopPropagation(),r.stopImmediatePropagation())},c=()=>{window.scrollTo(0,0),document.body.scrollTop=0,document.documentElement.scrollTop=0},i=["scroll","touchmove","touchstart","touchend"];i.forEach(r=>{window.addEventListener(r,s,{passive:!1,capture:!0}),document.addEventListener(r,s,{passive:!1,capture:!0}),document.body.addEventListener(r,s,{passive:!1,capture:!0})});const l=setInterval(c,16);return()=>{clearInterval(l),i.forEach(r=>{window.removeEventListener(r,s,{capture:!0}),document.removeEventListener(r,s,{capture:!0}),document.body.removeEventListener(r,s,{capture:!0})}),document.documentElement.style.overflow=t.documentElement.overflow,document.documentElement.style.height=t.documentElement.height,document.documentElement.style.position=t.documentElement.position,document.documentElement.style.width=t.documentElement.width,document.body.style.overflow=t.body.overflow,document.body.style.height=t.body.height,document.body.style.position=t.body.position,document.body.style.top=t.body.top,document.body.style.left=t.body.left,document.body.style.right=t.body.right,document.body.style.width=t.body.width,t.body.webkitOverflowScrolling?document.body.style.setProperty("-webkit-overflow-scrolling",t.body.webkitOverflowScrolling):document.body.style.removeProperty("-webkit-overflow-scrolling"),window.scrollTo(0,o)}}return()=>{document.documentElement.style.overflow=t.documentElement.overflow,document.documentElement.style.height=t.documentElement.height,document.documentElement.style.position=t.documentElement.position,document.documentElement.style.width=t.documentElement.width,document.body.style.overflow=t.body.overflow,document.body.style.height=t.body.height,document.body.style.position=t.body.position,document.body.style.top=t.body.top,document.body.style.left=t.body.left,document.body.style.right=t.body.right,document.body.style.width=t.body.width,window.scrollTo(0,o)}},[e])},L=e=>{const[o,d]=n.useState(null);return n.useEffect(()=>{const t=i=>typeof i=="string"?document.querySelector(i):i.current,s=()=>{const i=t(e);d(i?i.getBoundingClientRect():null)},c=()=>{requestAnimationFrame(s)};return s(),window.addEventListener("scroll",c,{passive:!0}),window.addEventListener("resize",c,{passive:!0}),()=>{window.removeEventListener("scroll",c),window.removeEventListener("resize",c)}},[e]),o},T=()=>{const[e,o]=n.useState(null),[d,t]=n.useState({scrollY:0,scrollPercentage:0,isAtTop:!0,isAtBottom:!1,scrollableHeight:0,clientHeight:0,scrollHeight:0}),s=n.useCallback(c=>{o(c)},[]);return n.useEffect(()=>{if(!e)return;const c=()=>{const{scrollTop:r,scrollHeight:u,clientHeight:a}=e,w=u-a;if(w<=0){t({scrollY:0,scrollPercentage:0,isAtTop:!0,isAtBottom:!0,scrollableHeight:0,clientHeight:a,scrollHeight:u});return}const m=Math.min(100,Math.max(0,r/w*100));t({scrollY:r,scrollPercentage:m,isAtTop:r<=0,isAtBottom:r>=w-1,scrollableHeight:w,clientHeight:a,scrollHeight:u})};c();const i=()=>{c()};e.addEventListener("scroll",i,{passive:!0});const l=new ResizeObserver(()=>{c()});return l.observe(e),()=>{e.removeEventListener("scroll",i),l.unobserve(e)}},[e]),{...d,element:e,setRef:s}},f={sm:640,md:768,lg:1024,xl:1280,"2xl":1536},x=e=>{let o="xs";return e>=f["2xl"]?o="2xl":e>=f.xl?o="xl":e>=f.lg?o="lg":e>=f.md?o="md":e>=f.sm?o="sm":o="xs",{current:o,xs:e<f.sm,sm:e>=f.sm&&e<f.md,md:e>=f.md&&e<f.lg,lg:e>=f.lg&&e<f.xl,xl:e>=f.xl&&e<f["2xl"],"2xl":e>=f["2xl"]}},R=e=>{const{delay:o=100,container:d}=e||{},[t,s]=n.useState({width:0,height:0}),[c,i]=n.useState({current:"xs",xs:!0,sm:!1,md:!1,lg:!1,xl:!1,"2xl":!1}),[l,r]=n.useState({width:0,height:0}),u=n.useRef(null),a=n.useRef(null);return E(()=>{r(t)},{delay:o},[t]),n.useEffect(()=>{const w=()=>{const h=d??u.current??document.body;if(!h)return;const{offsetWidth:y,offsetHeight:v}=h;s(p=>p.width!==y||p.height!==v?{width:y,height:v}:p),i(p=>{const b=x(y);return p.current!==b.current?b:p})},m=()=>{const h=d??u.current??document.body;h&&(w(),a.current&&a.current.disconnect(),a.current=new ResizeObserver(()=>{requestAnimationFrame(()=>{w()})}),a.current.observe(h))},g=()=>{a.current&&(a.current.disconnect(),a.current=null)};return m(),()=>{g()}},[d]),{size:l,breakpoint:c,ref:u}},V=(e,o={})=>{const{retryCount:d=0,retryDelay:t=1e3}=o,[s,c]=n.useState(!0),[i,l]=n.useState(null),[r,u]=n.useState(!1),[a,w]=n.useState(0),m=n.useCallback(()=>{if(!e){c(!1),u(!1);return}c(!0),l(null);const h=new Image;h.src=e,h.onload=()=>{c(!1),u(!0),l(null),w(0)},h.onerror=y=>{c(!1),u(!1),l(y),a<d&&setTimeout(()=>{w(v=>v+1)},t)}},[e,a,d,t]);n.useEffect(()=>{m()},[m]);const g=n.useCallback(()=>{w(0),m()},[m]);return{loading:s,error:i,loaded:r,retry:g}},z=(e,o)=>{const d=n.useRef(o),[t,s]=n.useState(()=>{if(typeof window>"u")return o;try{const i=window.localStorage.getItem(e);return i?JSON.parse(i):o}catch{return o}});n.useEffect(()=>{if(!(typeof window>"u"))try{const i=window.localStorage.getItem(e);i?s(JSON.parse(i)):window.localStorage.setItem(e,JSON.stringify(d.current))}catch(i){console.error(`Error reading localStorage key "${e}":`,i)}},[e]);const c=n.useCallback(i=>{try{s(l=>{const r=i instanceof Function?i(l):i;return localStorage.setItem(e,JSON.stringify(r)),r})}catch(l){console.error(`Error setting localStorage key "${e}":`,l)}},[e]);return[t,c]},P=(e,o)=>{const d=n.useRef(e);n.useEffect(()=>{d.current=e},[e]),n.useEffect(()=>{let t;function s(){const c=d.current();c instanceof Promise?c.then(()=>{o&&(t=setTimeout(s,o))}):o&&(t=setTimeout(s,o))}if(o)return t=setTimeout(s,o),()=>t&&clearTimeout(t)},[o])},H=e=>{const o=n.useRef([]),d=n.useCallback(s=>{if(o.current[s]&&(o.current[s].scrollIntoView({behavior:"smooth",block:"start",inline:"start",...e}),e?.offset)){const c=o.current[s].getBoundingClientRect().top+window.scrollY-e.offset;window.scrollTo({top:c,behavior:e.behavior||"smooth"})}},[e]),t=n.useCallback((s,c)=>{o.current[c]=s},[]);return{elementRefs:o,setElementRef:t,scrollToElement:d}},I=()=>{const[e,o]=n.useState({x:0,y:0,percent:{x:0,y:0}});return n.useEffect(()=>{const d=()=>{const i=window.scrollX||0,l=window.scrollY||0,r=/iPad|iPhone|iPod/.test(navigator.userAgent),u=window.visualViewport,a=r&&u?u.width:window.innerWidth,w=r&&u?u.height:window.innerHeight,m=Math.max(0,document.documentElement.scrollWidth-a),g=Math.max(0,document.documentElement.scrollHeight-w),h=m===0?0:Math.min(100,i/m*100),y=g===0?0:Math.min(100,l/g*100);o({x:i,y:l,percent:{x:Math.floor(Math.max(0,h)),y:Math.floor(Math.max(0,y))}})};d();const t=()=>{d()},s=()=>{setTimeout(d,100)},c=()=>{setTimeout(d,50)};return window.addEventListener("scroll",t,{passive:!0}),window.addEventListener("resize",s),window.addEventListener("orientationchange",s),window.visualViewport&&window.visualViewport.addEventListener("resize",c),()=>{window.removeEventListener("scroll",t),window.removeEventListener("resize",s),window.removeEventListener("orientationchange",s),window.visualViewport&&window.visualViewport.removeEventListener("resize",c)}},[]),e},k=(e={})=>{const{isInApp:o=!1,debounce:d=100}=e,[t,s]=n.useState({width:0,height:0,offsetLeft:0,offsetTop:0,pageLeft:0,pageTop:0,scale:1}),c=n.useCallback(()=>{const l=window.innerHeight,r=window.visualViewport?.height||l,u=document.documentElement.clientHeight,a=document.body.clientHeight;return window.visualViewport&&Math.abs(r-l)>100?r:Math.max(l,u,a)},[]),i=n.useCallback(()=>{if(window.visualViewport&&!o)return window.visualViewport;const l=window.visualViewport?.width||window.innerWidth,r=o?c():window.visualViewport?.height||window.innerHeight;return{width:l,height:r,offsetLeft:window.visualViewport?.offsetLeft||0,offsetTop:window.visualViewport?.offsetTop||0,pageLeft:window.scrollX??window.pageXOffset??0,pageTop:window.scrollY??window.pageYOffset??0,scale:window.visualViewport?.scale||1}},[o,c]);return n.useEffect(()=>{let l;const r=()=>{clearTimeout(l),l=setTimeout(()=>{s(i())},d)},u=()=>s(i());u();const a=["resize","orientationchange"];o&&a.push("focus","blur","touchstart","touchend"),a.forEach(m=>{m==="resize"||m==="orientationchange"?window.addEventListener(m,r):window.addEventListener(m,u,{passive:!0})}),window.visualViewport&&(window.visualViewport.addEventListener("resize",u),window.visualViewport.addEventListener("scroll",u));let w;if(o){let m=i().height;w=setInterval(()=>{const g=i().height;Math.abs(g-m)>50&&(m=g,u())},500)}return()=>{clearTimeout(l),w&&clearInterval(w),a.forEach(m=>{window.removeEventListener(m,m==="resize"||m==="orientationchange"?r:u)}),window.visualViewport&&(window.visualViewport.removeEventListener("resize",u),window.visualViewport.removeEventListener("scroll",u))}},[i,o,d]),t};exports.useBodyScrollLock=S;exports.useDebounce=E;exports.useElementPosition=L;exports.useElementScroll=T;exports.useImage=V;exports.useLocalStorage=z;exports.useRecursiveTimeout=P;exports.useResponsiveSize=R;exports.useScrollToElements=H;exports.useViewport=k;exports.useWindowScroll=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),L=(e,{delay:o=100,autoInvoke:d=!0},t=[])=>{const s=n.useRef(null),c=n.useRef(e),i=n.useRef(t),l=n.useRef(void 0);n.useEffect(()=>{c.current=e}),n.useEffect(()=>{i.current=t});const r=n.useRef(null);return r.current||(r.current=((...u)=>{s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{c.current(...u)},o)})),n.useEffect(()=>{const u=l.current===void 0||l.current.length!==t.length||l.current.some((w,a)=>w!==t[a]);u&&s.current&&clearTimeout(s.current),d&&u&&(l.current===void 0?c.current():r.current&&r.current()),l.current=t}),n.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]),r.current},T=(e=!0)=>{n.useEffect(()=>{if(!e)return;const o=window.scrollY,d=/iPad|iPhone|iPod/.test(navigator.userAgent),t={documentElement:{overflow:document.documentElement.style.overflow,height:document.documentElement.style.height,position:document.documentElement.style.position,width:document.documentElement.style.width},body:{overflow:document.body.style.overflow,height:document.body.style.height,position:document.body.style.position,top:document.body.style.top,left:document.body.style.left,right:document.body.style.right,width:document.body.style.width,webkitOverflowScrolling:document.body.style.getPropertyValue("-webkit-overflow-scrolling")}};if(document.documentElement.style.overflow="hidden",document.documentElement.style.height="100%",document.documentElement.style.position="fixed",document.documentElement.style.width="100%",document.body.style.overflow="hidden",document.body.style.height="100%",document.body.style.position="fixed",document.body.style.top=`-${o}px`,document.body.style.left="0",document.body.style.right="0",document.body.style.width="100%",d){document.body.style.setProperty("-webkit-overflow-scrolling","touch");const s=r=>{(r.target===document.body||r.target===document.documentElement||r.target===window)&&(r.preventDefault(),r.stopPropagation(),r.stopImmediatePropagation())},c=()=>{window.scrollTo(0,0),document.body.scrollTop=0,document.documentElement.scrollTop=0},i=["scroll","touchmove","touchstart","touchend"];i.forEach(r=>{window.addEventListener(r,s,{passive:!1,capture:!0}),document.addEventListener(r,s,{passive:!1,capture:!0}),document.body.addEventListener(r,s,{passive:!1,capture:!0})});const l=setInterval(c,16);return()=>{clearInterval(l),i.forEach(r=>{window.removeEventListener(r,s,{capture:!0}),document.removeEventListener(r,s,{capture:!0}),document.body.removeEventListener(r,s,{capture:!0})}),document.documentElement.style.overflow=t.documentElement.overflow,document.documentElement.style.height=t.documentElement.height,document.documentElement.style.position=t.documentElement.position,document.documentElement.style.width=t.documentElement.width,document.body.style.overflow=t.body.overflow,document.body.style.height=t.body.height,document.body.style.position=t.body.position,document.body.style.top=t.body.top,document.body.style.left=t.body.left,document.body.style.right=t.body.right,document.body.style.width=t.body.width,t.body.webkitOverflowScrolling?document.body.style.setProperty("-webkit-overflow-scrolling",t.body.webkitOverflowScrolling):document.body.style.removeProperty("-webkit-overflow-scrolling"),window.scrollTo(0,o)}}return()=>{document.documentElement.style.overflow=t.documentElement.overflow,document.documentElement.style.height=t.documentElement.height,document.documentElement.style.position=t.documentElement.position,document.documentElement.style.width=t.documentElement.width,document.body.style.overflow=t.body.overflow,document.body.style.height=t.body.height,document.body.style.position=t.body.position,document.body.style.top=t.body.top,document.body.style.left=t.body.left,document.body.style.right=t.body.right,document.body.style.width=t.body.width,window.scrollTo(0,o)}},[e])},x=e=>{const[o,d]=n.useState(null);return n.useEffect(()=>{const t=i=>typeof i=="string"?document.querySelector(i):i.current,s=()=>{const i=t(e);d(i?i.getBoundingClientRect():null)},c=()=>{requestAnimationFrame(s)};return s(),window.addEventListener("scroll",c,{passive:!0}),window.addEventListener("resize",c,{passive:!0}),()=>{window.removeEventListener("scroll",c),window.removeEventListener("resize",c)}},[e]),o},R=()=>{const[e,o]=n.useState(null),[d,t]=n.useState({scrollY:0,scrollPercentage:0,isAtTop:!0,isAtBottom:!1,scrollableHeight:0,clientHeight:0,scrollHeight:0}),s=n.useCallback(c=>{o(c)},[]);return n.useEffect(()=>{if(!e)return;const c=()=>{const{scrollTop:r,scrollHeight:u,clientHeight:w}=e,a=u-w;if(a<=0){t({scrollY:0,scrollPercentage:0,isAtTop:!0,isAtBottom:!0,scrollableHeight:0,clientHeight:w,scrollHeight:u});return}const m=Math.min(100,Math.max(0,r/a*100));t({scrollY:r,scrollPercentage:m,isAtTop:r<=0,isAtBottom:r>=a-1,scrollableHeight:a,clientHeight:w,scrollHeight:u})};c();const i=()=>{c()};e.addEventListener("scroll",i,{passive:!0});const l=new ResizeObserver(()=>{c()});return l.observe(e),()=>{e.removeEventListener("scroll",i),l.unobserve(e)}},[e]),{...d,element:e,setRef:s}},f={sm:640,md:768,lg:1024,xl:1280,"2xl":1536},V=e=>{let o="xs";return e>=f["2xl"]?o="2xl":e>=f.xl?o="xl":e>=f.lg?o="lg":e>=f.md?o="md":e>=f.sm?o="sm":o="xs",{current:o,xs:e<f.sm,sm:e>=f.sm&&e<f.md,md:e>=f.md&&e<f.lg,lg:e>=f.lg&&e<f.xl,xl:e>=f.xl&&e<f["2xl"],"2xl":e>=f["2xl"]}},z=e=>{const{delay:o=100,container:d}=e||{},[t,s]=n.useState({width:0,height:0}),[c,i]=n.useState({current:"xs",xs:!0,sm:!1,md:!1,lg:!1,xl:!1,"2xl":!1}),[l,r]=n.useState({width:0,height:0}),[u,w]=n.useState(null),a=n.useRef(null),m=n.useCallback(h=>{w(h)},[]);return L(()=>{r(t)},{delay:o},[t]),n.useEffect(()=>{const h=()=>{const y=d??u??document.body;if(!y)return;const{offsetWidth:b,offsetHeight:E}=y;s(p=>p.width!==b||p.height!==E?{width:b,height:E}:p),i(p=>{const S=V(b);return p.current!==S.current?S:p})},g=()=>{const y=d??u??document.body;y&&(h(),a.current&&a.current.disconnect(),a.current=new ResizeObserver(()=>{requestAnimationFrame(()=>{h()})}),a.current.observe(y))},v=()=>{a.current&&(a.current.disconnect(),a.current=null)};return g(),()=>{v()}},[d,u]),{size:l,breakpoint:c,ref:m}},P=(e,o={})=>{const{retryCount:d=0,retryDelay:t=1e3}=o,[s,c]=n.useState(!0),[i,l]=n.useState(null),[r,u]=n.useState(!1),[w,a]=n.useState(0),m=n.useCallback(()=>{if(!e){c(!1),u(!1);return}c(!0),l(null);const g=new Image;g.src=e,g.onload=()=>{c(!1),u(!0),l(null),a(0)},g.onerror=v=>{c(!1),u(!1),l(v),w<d&&setTimeout(()=>{a(y=>y+1)},t)}},[e,w,d,t]);n.useEffect(()=>{m()},[m]);const h=n.useCallback(()=>{a(0),m()},[m]);return{loading:s,error:i,loaded:r,retry:h}},H=(e,o)=>{const d=n.useRef(o),[t,s]=n.useState(()=>{if(typeof window>"u")return o;try{const i=window.localStorage.getItem(e);return i?JSON.parse(i):o}catch{return o}});n.useEffect(()=>{if(!(typeof window>"u"))try{const i=window.localStorage.getItem(e);i?s(JSON.parse(i)):window.localStorage.setItem(e,JSON.stringify(d.current))}catch(i){console.error(`Error reading localStorage key "${e}":`,i)}},[e]);const c=n.useCallback(i=>{try{s(l=>{const r=i instanceof Function?i(l):i;return localStorage.setItem(e,JSON.stringify(r)),r})}catch(l){console.error(`Error setting localStorage key "${e}":`,l)}},[e]);return[t,c]},I=(e,o)=>{const d=n.useRef(e);n.useEffect(()=>{d.current=e},[e]),n.useEffect(()=>{let t;function s(){const c=d.current();c instanceof Promise?c.then(()=>{o&&(t=setTimeout(s,o))}):o&&(t=setTimeout(s,o))}if(o)return t=setTimeout(s,o),()=>t&&clearTimeout(t)},[o])},k=e=>{const o=n.useRef([]),d=n.useCallback(s=>{if(o.current[s]&&(o.current[s].scrollIntoView({behavior:"smooth",block:"start",inline:"start",...e}),e?.offset)){const c=o.current[s].getBoundingClientRect().top+window.scrollY-e.offset;window.scrollTo({top:c,behavior:e.behavior||"smooth"})}},[e]),t=n.useCallback((s,c)=>{o.current[c]=s},[]);return{elementRefs:o,setElementRef:t,scrollToElement:d}},C=()=>{const[e,o]=n.useState({x:0,y:0,percent:{x:0,y:0}});return n.useEffect(()=>{const d=()=>{const i=window.scrollX||0,l=window.scrollY||0,r=/iPad|iPhone|iPod/.test(navigator.userAgent),u=window.visualViewport,w=r&&u?u.width:window.innerWidth,a=r&&u?u.height:window.innerHeight,m=Math.max(0,document.documentElement.scrollWidth-w),h=Math.max(0,document.documentElement.scrollHeight-a),g=m===0?0:Math.min(100,i/m*100),v=h===0?0:Math.min(100,l/h*100);o({x:i,y:l,percent:{x:Math.floor(Math.max(0,g)),y:Math.floor(Math.max(0,v))}})};d();const t=()=>{d()},s=()=>{setTimeout(d,100)},c=()=>{setTimeout(d,50)};return window.addEventListener("scroll",t,{passive:!0}),window.addEventListener("resize",s),window.addEventListener("orientationchange",s),window.visualViewport&&window.visualViewport.addEventListener("resize",c),()=>{window.removeEventListener("scroll",t),window.removeEventListener("resize",s),window.removeEventListener("orientationchange",s),window.visualViewport&&window.visualViewport.removeEventListener("resize",c)}},[]),e},O=(e={})=>{const{isInApp:o=!1,debounce:d=100}=e,[t,s]=n.useState({width:0,height:0,offsetLeft:0,offsetTop:0,pageLeft:0,pageTop:0,scale:1}),c=n.useCallback(()=>{const l=window.innerHeight,r=window.visualViewport?.height||l,u=document.documentElement.clientHeight,w=document.body.clientHeight;return window.visualViewport&&Math.abs(r-l)>100?r:Math.max(l,u,w)},[]),i=n.useCallback(()=>{if(window.visualViewport&&!o)return window.visualViewport;const l=window.visualViewport?.width||window.innerWidth,r=o?c():window.visualViewport?.height||window.innerHeight;return{width:l,height:r,offsetLeft:window.visualViewport?.offsetLeft||0,offsetTop:window.visualViewport?.offsetTop||0,pageLeft:window.scrollX??window.pageXOffset??0,pageTop:window.scrollY??window.pageYOffset??0,scale:window.visualViewport?.scale||1}},[o,c]);return n.useEffect(()=>{let l;const r=()=>{clearTimeout(l),l=setTimeout(()=>{s(i())},d)},u=()=>s(i());u();const w=["resize","orientationchange"];o&&w.push("focus","blur","touchstart","touchend"),w.forEach(m=>{m==="resize"||m==="orientationchange"?window.addEventListener(m,r):window.addEventListener(m,u,{passive:!0})}),window.visualViewport&&(window.visualViewport.addEventListener("resize",u),window.visualViewport.addEventListener("scroll",u));let a;if(o){let m=i().height;a=setInterval(()=>{const h=i().height;Math.abs(h-m)>50&&(m=h,u())},500)}return()=>{clearTimeout(l),a&&clearInterval(a),w.forEach(m=>{window.removeEventListener(m,m==="resize"||m==="orientationchange"?r:u)}),window.visualViewport&&(window.visualViewport.removeEventListener("resize",u),window.visualViewport.removeEventListener("scroll",u))}},[i,o,d]),t};exports.useBodyScrollLock=T;exports.useDebounce=L;exports.useElementPosition=x;exports.useElementScroll=R;exports.useImage=P;exports.useLocalStorage=H;exports.useRecursiveTimeout=I;exports.useResponsiveSize=z;exports.useScrollToElements=k;exports.useViewport=O;exports.useWindowScroll=C;

package/dist/index.d.ts

@@ -73,7 +73,7 @@ export declare const useResponsiveSize: <T extends HTMLElement>(options?: Option
         height: number;
     };
     breakpoint: BreakpointInfo;
-    ref: RefObject<T | null>;
+    ref: (node: T | null) => void;
 };
 
 export declare const useScrollToElements: (options?: Options_4) => {

package/dist/index.js

@@ -1,23 +1,23 @@
-import { useRef as y, useEffect as f, useState as h, useCallback as v } from "react";
-const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
-  const n = y(null), i = y(e), s = y(t), c = y(void 0);
+import { useRef as y, useEffect as f, useState as h, useCallback as p } from "react";
+const V = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
+  const n = y(null), i = y(e), s = y(t), l = y(void 0);
   f(() => {
     i.current = e;
   }), f(() => {
     s.current = t;
   });
   const r = y(null);
-  return r.current || (r.current = ((...l) => {
+  return r.current || (r.current = ((...c) => {
     n.current && clearTimeout(n.current), n.current = setTimeout(() => {
-      i.current(...l);
+      i.current(...c);
     }, o);
   })), f(() => {
-    const l = c.current === void 0 || c.current.length !== t.length || c.current.some((u, a) => u !== t[a]);
-    l && n.current && clearTimeout(n.current), d && l && (c.current === void 0 ? i.current() : r.current && r.current()), c.current = t;
+    const c = l.current === void 0 || l.current.length !== t.length || l.current.some((a, u) => a !== t[u]);
+    c && n.current && clearTimeout(n.current), d && c && (l.current === void 0 ? i.current() : r.current && r.current()), l.current = t;
   }), f(() => () => {
     n.current && clearTimeout(n.current);
   }, []), r.current;
-}, z = (e = !0) => {
+}, I = (e = !0) => {
   f(() => {
     if (!e)
       return;
@@ -60,9 +60,9 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
           capture: !0
         });
       });
-      const c = setInterval(i, 16);
+      const l = setInterval(i, 16);
       return () => {
-        clearInterval(c), s.forEach((r) => {
+        clearInterval(l), s.forEach((r) => {
           window.removeEventListener(r, n, { capture: !0 }), document.removeEventListener(r, n, { capture: !0 }), document.body.removeEventListener(r, n, {
             capture: !0
           });
@@ -76,7 +76,7 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
       document.documentElement.style.overflow = t.documentElement.overflow, document.documentElement.style.height = t.documentElement.height, document.documentElement.style.position = t.documentElement.position, document.documentElement.style.width = t.documentElement.width, document.body.style.overflow = t.body.overflow, document.body.style.height = t.body.height, document.body.style.position = t.body.position, document.body.style.top = t.body.top, document.body.style.left = t.body.left, document.body.style.right = t.body.right, document.body.style.width = t.body.width, window.scrollTo(0, o);
     };
   }, [e]);
-}, H = (e) => {
+}, P = (e) => {
   const [o, d] = h(null);
   return f(() => {
     const t = (s) => typeof s == "string" ? document.querySelector(s) : s.current, n = () => {
@@ -89,7 +89,7 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
       window.removeEventListener("scroll", i), window.removeEventListener("resize", i);
     };
   }, [e]), o;
-}, I = () => {
+}, R = () => {
   const [e, o] = h(null), [d, t] = h({
     scrollY: 0,
     scrollPercentage: 0,
@@ -98,38 +98,38 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
     scrollableHeight: 0,
     clientHeight: 0,
     scrollHeight: 0
-  }), n = v((i) => {
+  }), n = p((i) => {
     o(i);
   }, []);
   return f(() => {
     if (!e)
       return;
     const i = () => {
-      const { scrollTop: r, scrollHeight: l, clientHeight: u } = e, a = l - u;
-      if (a <= 0) {
+      const { scrollTop: r, scrollHeight: c, clientHeight: a } = e, u = c - a;
+      if (u <= 0) {
         t({
           scrollY: 0,
           scrollPercentage: 0,
           isAtTop: !0,
           isAtBottom: !0,
           scrollableHeight: 0,
-          clientHeight: u,
-          scrollHeight: l
+          clientHeight: a,
+          scrollHeight: c
         });
         return;
       }
       const m = Math.min(
         100,
-        Math.max(0, r / a * 100)
+        Math.max(0, r / u * 100)
       );
       t({
         scrollY: r,
         scrollPercentage: m,
         isAtTop: r <= 0,
-        isAtBottom: r >= a - 1,
-        scrollableHeight: a,
-        clientHeight: u,
-        scrollHeight: l
+        isAtBottom: r >= u - 1,
+        scrollableHeight: u,
+        clientHeight: a,
+        scrollHeight: c
       });
     };
     i();
@@ -137,11 +137,11 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
       i();
     };
     e.addEventListener("scroll", s, { passive: !0 });
-    const c = new ResizeObserver(() => {
+    const l = new ResizeObserver(() => {
       i();
     });
-    return c.observe(e), () => {
-      e.removeEventListener("scroll", s), c.unobserve(e);
+    return l.observe(e), () => {
+      e.removeEventListener("scroll", s), l.unobserve(e);
     };
   }, [e]), { ...d, element: e, setRef: n };
 }, w = {
@@ -156,7 +156,7 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
   // >= 1280px
   "2xl": 1536
   // >= 1536px
-}, T = (e) => {
+}, z = (e) => {
   let o = "xs";
   return e >= w["2xl"] ? o = "2xl" : e >= w.xl ? o = "xl" : e >= w.lg ? o = "lg" : e >= w.md ? o = "md" : e >= w.sm ? o = "sm" : o = "xs", {
     current: o,
@@ -167,7 +167,7 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
     xl: e >= w.xl && e < w["2xl"],
     "2xl": e >= w["2xl"]
   };
-}, P = (e) => {
+}, A = (e) => {
   const { delay: o = 100, container: d } = e || {}, [t, n] = h({ width: 0, height: 0 }), [i, s] = h({
     current: "xs",
     xs: !0,
@@ -176,70 +176,72 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
     lg: !1,
     xl: !1,
     "2xl": !1
-  }), [c, r] = h({ width: 0, height: 0 }), l = y(null), u = y(null);
-  return x(
+  }), [l, r] = h({ width: 0, height: 0 }), [c, a] = h(null), u = y(null), m = p((g) => {
+    a(g);
+  }, []);
+  return V(
     () => {
       r(t);
     },
     { delay: o },
     [t]
   ), f(() => {
-    const a = () => {
-      const g = d ?? l.current ?? document.body;
-      if (!g)
+    const g = () => {
+      const b = d ?? c ?? document.body;
+      if (!b)
         return;
-      const { offsetWidth: b, offsetHeight: S } = g;
-      n((E) => E.width !== b || E.height !== S ? { width: b, height: S } : E), s((E) => {
-        const L = T(b);
-        return E.current !== L.current ? L : E;
+      const { offsetWidth: L, offsetHeight: x } = b;
+      n((E) => E.width !== L || E.height !== x ? { width: L, height: x } : E), s((E) => {
+        const T = z(L);
+        return E.current !== T.current ? T : E;
       });
-    }, m = () => {
-      const g = d ?? l.current ?? document.body;
-      g && (a(), u.current && u.current.disconnect(), u.current = new ResizeObserver(() => {
+    }, v = () => {
+      const b = d ?? c ?? document.body;
+      b && (g(), u.current && u.current.disconnect(), u.current = new ResizeObserver(() => {
         requestAnimationFrame(() => {
-          a();
+          g();
         });
-      }), u.current.observe(g));
-    }, p = () => {
+      }), u.current.observe(b));
+    }, S = () => {
       u.current && (u.current.disconnect(), u.current = null);
     };
-    return m(), () => {
-      p();
+    return v(), () => {
+      S();
     };
-  }, [d]), {
-    size: c,
+  }, [d, c]), {
+    size: l,
     breakpoint: i,
-    ref: l
+    ref: m
   };
-}, R = (e, o = {}) => {
-  const { retryCount: d = 0, retryDelay: t = 1e3 } = o, [n, i] = h(!0), [s, c] = h(null), [r, l] = h(!1), [u, a] = h(0), m = v(() => {
+}, O = (e, o = {}) => {
+  const { retryCount: d = 0, retryDelay: t = 1e3 } = o, [n, i] = h(!0), [s, l] = h(null), [r, c] = h(!1), [a, u] = h(0), m = p(() => {
     if (!e) {
-      i(!1), l(!1);
+      i(!1), c(!1);
       return;
     }
-    i(!0), c(null);
-    const g = new Image();
-    g.src = e, g.onload = () => {
-      i(!1), l(!0), c(null), a(0);
-    }, g.onerror = (b) => {
-      i(!1), l(!1), c(b), u < d && setTimeout(() => {
-        a((S) => S + 1);
+    i(!0), l(null);
+    const v = new Image();
+    v.src = e, v.onload = () => {
+      i(!1), c(!0), l(null), u(0);
+    }, v.onerror = (S) => {
+      i(!1), c(!1), l(S), a < d && setTimeout(() => {
+        u((b) => b + 1);
       }, t);
     };
-  }, [e, u, d, t]);
+  }, [e, a, d, t]);
   f(() => {
     m();
   }, [m]);
-  const p = v(() => {
-    a(0), m();
+  const g = p(() => {
+    u(0), m();
   }, [m]);
   return {
     loading: n,
     error: s,
     loaded: r,
-    retry: p
+    retry: g
   };
-}, A = (e, o) => {
+}, M = (e, o) => {
   const d = y(o), [t, n] = h(() => {
     if (typeof window > "u")
       return o;
@@ -259,21 +261,21 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
         console.error(`Error reading localStorage key "${e}":`, s);
       }
   }, [e]);
-  const i = v(
+  const i = p(
     (s) => {
       try {
-        n((c) => {
-          const r = s instanceof Function ? s(c) : s;
+        n((l) => {
+          const r = s instanceof Function ? s(l) : s;
           return localStorage.setItem(e, JSON.stringify(r)), r;
         });
-      } catch (c) {
-        console.error(`Error setting localStorage key "${e}":`, c);
+      } catch (l) {
+        console.error(`Error setting localStorage key "${e}":`, l);
       }
     },
     [e]
   );
   return [t, i];
-}, O = (e, o) => {
+}, Y = (e, o) => {
   const d = y(e);
   f(() => {
     d.current = e;
@@ -288,8 +290,8 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
     if (o)
       return t = setTimeout(n, o), () => t && clearTimeout(t);
   }, [o]);
-}, M = (e) => {
-  const o = y([]), d = v(
+}, C = (e) => {
+  const o = y([]), d = p(
     (n) => {
       if (o.current[n] && (o.current[n].scrollIntoView({
         behavior: "smooth",
@@ -305,11 +307,11 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
       }
     },
     [e]
-  ), t = v((n, i) => {
+  ), t = p((n, i) => {
     o.current[i] = n;
   }, []);
   return { elementRefs: o, setElementRef: t, scrollToElement: d };
-}, Y = () => {
+}, k = () => {
   const [e, o] = h({
     x: 0,
     y: 0,
@@ -320,19 +322,19 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
   });
   return f(() => {
     const d = () => {
-      const s = window.scrollX || 0, c = window.scrollY || 0, r = /iPad|iPhone|iPod/.test(navigator.userAgent), l = window.visualViewport, u = r && l ? l.width : window.innerWidth, a = r && l ? l.height : window.innerHeight, m = Math.max(
+      const s = window.scrollX || 0, l = window.scrollY || 0, r = /iPad|iPhone|iPod/.test(navigator.userAgent), c = window.visualViewport, a = r && c ? c.width : window.innerWidth, u = r && c ? c.height : window.innerHeight, m = Math.max(
         0,
-        document.documentElement.scrollWidth - u
-      ), p = Math.max(
+        document.documentElement.scrollWidth - a
+      ), g = Math.max(
         0,
-        document.documentElement.scrollHeight - a
-      ), g = m === 0 ? 0 : Math.min(100, s / m * 100), b = p === 0 ? 0 : Math.min(100, c / p * 100);
+        document.documentElement.scrollHeight - u
+      ), v = m === 0 ? 0 : Math.min(100, s / m * 100), S = g === 0 ? 0 : Math.min(100, l / g * 100);
       o({
         x: s,
-        y: c,
+        y: l,
         percent: {
-          x: Math.floor(Math.max(0, g)),
-          y: Math.floor(Math.max(0, b))
+          x: Math.floor(Math.max(0, v)),
+          y: Math.floor(Math.max(0, S))
         }
       });
     };
@@ -351,7 +353,7 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
       );
     };
   }, []), e;
-}, C = (e = {}) => {
+}, B = (e = {}) => {
   const { isInApp: o = !1, debounce: d = 100 } = e, [t, n] = h({
     width: 0,
     height: 0,
@@ -360,15 +362,15 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
     pageLeft: 0,
     pageTop: 0,
     scale: 1
-  }), i = v(() => {
-    const c = window.innerHeight, r = window.visualViewport?.height || c, l = document.documentElement.clientHeight, u = document.body.clientHeight;
-    return window.visualViewport && Math.abs(r - c) > 100 ? r : Math.max(c, l, u);
-  }, []), s = v(() => {
+  }), i = p(() => {
+    const l = window.innerHeight, r = window.visualViewport?.height || l, c = document.documentElement.clientHeight, a = document.body.clientHeight;
+    return window.visualViewport && Math.abs(r - l) > 100 ? r : Math.max(l, c, a);
+  }, []), s = p(() => {
     if (window.visualViewport && !o)
       return window.visualViewport;
-    const c = window.visualViewport?.width || window.innerWidth, r = o ? i() : window.visualViewport?.height || window.innerHeight;
+    const l = window.visualViewport?.width || window.innerWidth, r = o ? i() : window.visualViewport?.height || window.innerHeight;
     return {
-      width: c,
+      width: l,
       height: r,
       offsetLeft: window.visualViewport?.offsetLeft || 0,
       offsetTop: window.visualViewport?.offsetTop || 0,
@@ -378,45 +380,45 @@ const x = (e, { delay: o = 100, autoInvoke: d = !0 }, t = []) => {
     };
   }, [o, i]);
   return f(() => {
-    let c;
+    let l;
     const r = () => {
-      clearTimeout(c), c = setTimeout(() => {
+      clearTimeout(l), l = setTimeout(() => {
         n(s());
       }, d);
-    }, l = () => n(s());
-    l();
-    const u = ["resize", "orientationchange"];
-    o && u.push("focus", "blur", "touchstart", "touchend"), u.forEach((m) => {
-      m === "resize" || m === "orientationchange" ? window.addEventListener(m, r) : window.addEventListener(m, l, { passive: !0 });
-    }), window.visualViewport && (window.visualViewport.addEventListener("resize", l), window.visualViewport.addEventListener("scroll", l));
-    let a;
+    }, c = () => n(s());
+    c();
+    const a = ["resize", "orientationchange"];
+    o && a.push("focus", "blur", "touchstart", "touchend"), a.forEach((m) => {
+      m === "resize" || m === "orientationchange" ? window.addEventListener(m, r) : window.addEventListener(m, c, { passive: !0 });
+    }), window.visualViewport && (window.visualViewport.addEventListener("resize", c), window.visualViewport.addEventListener("scroll", c));
+    let u;
     if (o) {
       let m = s().height;
-      a = setInterval(() => {
-        const p = s().height;
-        Math.abs(p - m) > 50 && (m = p, l());
+      u = setInterval(() => {
+        const g = s().height;
+        Math.abs(g - m) > 50 && (m = g, c());
       }, 500);
     }
     return () => {
-      clearTimeout(c), a && clearInterval(a), u.forEach((m) => {
+      clearTimeout(l), u && clearInterval(u), a.forEach((m) => {
         window.removeEventListener(
           m,
-          m === "resize" || m === "orientationchange" ? r : l
+          m === "resize" || m === "orientationchange" ? r : c
         );
-      }), window.visualViewport && (window.visualViewport.removeEventListener("resize", l), window.visualViewport.removeEventListener("scroll", l));
+      }), window.visualViewport && (window.visualViewport.removeEventListener("resize", c), window.visualViewport.removeEventListener("scroll", c));
     };
   }, [s, o, d]), t;
 };
 export {
-  z as useBodyScrollLock,
-  x as useDebounce,
-  H as useElementPosition,
-  I as useElementScroll,
-  R as useImage,
-  A as useLocalStorage,
-  O as useRecursiveTimeout,
-  P as useResponsiveSize,
-  M as useScrollToElements,
-  C as useViewport,
-  Y as useWindowScroll
+  I as useBodyScrollLock,
+  V as useDebounce,
+  P as useElementPosition,
+  R as useElementScroll,
+  O as useImage,
+  M as useLocalStorage,
+  Y as useRecursiveTimeout,
+  A as useResponsiveSize,
+  C as useScrollToElements,
+  B as useViewport,
+  k as useWindowScroll
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/use-hooks",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A collection of reusable React 19 hooks for common UI and interaction patterns",
   "keywords": [
     "react",