scroller-motion/dist/index.modern.mjs

🛹 Elegant motion scrolling for React

import{jsx as e}from"react/jsx-runtime";import{createContext as r,useMemo as i,useState as t,useEffect as n,useContext as s,forwardRef as o,useRef as l,useImperativeHandle as c}from"react";import{useTransform as d,transform as h,useScroll as a,useSpring as u,motion as g}from"framer-motion";import w from"debounce-fn";function f(){return f=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var i=arguments[r];for(var t in i)Object.prototype.hasOwnProperty.call(i,t)&&(e[t]=i[t])}return e},f.apply(this,arguments)}function m(e,r){if(null==e)return{};var i,t,n={},s=Object.keys(e);for(t=0;t<s.length;t++)r.indexOf(i=s[t])>=0||(n[i]=e[i]);return n}const p=r(void 0),v=({axisSpring:e,scale:r,refSize:t,windowSize:n})=>{const s=i(()=>t>n?t*r:t,[t,r,n]),o=i(()=>[0,s-n],[s,n]),l=i(()=>[0,-1*(t-n)],[t,n]);return{axis:d(e,o,l,{clamp:!1}),progress:d(e,e=>Math.max(0,Math.min(h(e,o,[0,1]),1))),size:s}},y="function"==typeof ResizeObserver,x=()=>{const e=s(p);if(void 0===e)throw new Error("useScrollerMotion must be used within ScrollerMotion");return e},b=["children","childrenRef","disabled","height","style","width","x","y"],z={position:"fixed",left:0,top:0,right:0,bottom:0},S=r=>{let{children:t,childrenRef:n,disabled:s,height:o,style:l,width:c,x:d,y:h}=r,a=m(r,b);const u=i(()=>f({},l,s?{}:{height:o,width:c}),[s,o,l,c]),w=i(()=>s?{}:z,[s]),p=i(()=>({x:s?0:d,y:s?0:h}),[s,d,h]);return e("div",f({},a,{style:u,children:e("div",{style:w,children:e(g.div,{style:p,ref:n,children:t})})}))},P=["children","disabled","scale","spring"],X=1,Y={damping:50,mass:1.25,stiffness:200},O=o((r,s)=>{let{children:o,disabled:d,scale:h=X,spring:g=Y}=r,x=m(r,P);const b=l(null),{height:z,width:O,scrollX:E,scrollXProgress:M,scrollY:j,scrollYProgress:R,x:H,y:L}=(({ref:e,scale:r,spring:s})=>{const o=i(()=>Math.max(1,r),[r]),{height:l,width:c}=(()=>{const[e,r]=t({height:0,width:0});return n(()=>{const e=()=>r({width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight});return e(),window.addEventListener("resize",e,!1),()=>window.removeEventListener("resize",e,!1)},[]),e})(),{height:d,width:h}=(e=>{const[r,i]=t({height:0,width:0});return n(()=>{const r=()=>{return i({height:null!=(t=null==(r=e.current)?void 0:r.scrollHeight)?t:0,width:null!=(n=null==r?void 0:r.scrollWidth)?n:0});var r,t,n},t=w(r,{wait:400});let n=null;return e.current&&(r(),window.addEventListener("resize",t),y&&(n=new ResizeObserver(r),n.observe(e.current))),()=>{window.removeEventListener("resize",t),n&&n.disconnect()}},[]),r})(e),{x:g,y:f}=(e=>{const{scrollX:r,scrollY:i}=a(),t="object"==typeof e?e:void 0,n=u(r,t),s=u(i,t);return{x:t?n:r,y:t?s:i}})(s),{axis:m,progress:p,size:x}=v({axisSpring:g,scale:o,refSize:h,windowSize:c}),{axis:b,progress:z,size:S}=v({axisSpring:f,scale:o,refSize:d,windowSize:l});return{height:S,width:x,scrollX:g,scrollXProgress:p,scrollY:f,scrollYProgress:z,x:m,y:b}})({ref:b,scale:h,spring:g});c(s,()=>({scrollX:E,scrollXProgress:M,scrollY:j,scrollYProgress:R,x:H,y:L}),[E,M,j,R,H,L]);const W=i(()=>({scrollX:E,scrollXProgress:M,scrollY:j,scrollYProgress:R,x:H,y:L}),[E,M,j,R,H,L]);return e(S,f({},x,{childrenRef:b,disabled:d,height:z,width:O,x:H,y:L,children:e(p.Provider,{value:W,children:o})}))});O.displayName="ScrollerMotion";export{O as ScrollerMotion,x as useScrollerMotion};
//# sourceMappingURL=index.modern.mjs.map