scroller-motion/dist/index.js

🛹 Elegant motion scrolling for React

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