react-cool-virtual - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

CHANGELOG.md

 # react-cool-virtual
 
+## 0.3.0
+
+### Minor Changes
+
+- [#142](https://github.com/wellyshen/react-cool-virtual/pull/142) [`b1f96f3`](https://github.com/wellyshen/react-cool-virtual/commit/b1f96f3a77d7eb6ad2e3030a5be82c7da08320a9) Thanks [@wellyshen](https://github.com/wellyshen)! - feat: provides a callback with given `distance` parameter for `scrollDuration` option
+
+### Patch Changes
+
+- [#141](https://github.com/wellyshen/react-cool-virtual/pull/141) [`99ffe72`](https://github.com/wellyshen/react-cool-virtual/commit/99ffe724a48e6720e52113a52aa60a3af59580d5) Thanks [@wellyshen](https://github.com/wellyshen)! - fix: `scrollToItem` with center alignment causes infinite loop
+
+* [#139](https://github.com/wellyshen/react-cool-virtual/pull/139) [`5bdfbb2`](https://github.com/wellyshen/react-cool-virtual/commit/5bdfbb257c427617b6c3ec066deb41630a510b66) Thanks [@wellyshen](https://github.com/wellyshen)! - fix: `scrollToItem` causes empty rows
+
 ## 0.2.2
@@ -4,0 +16,0 @@

dist/index.cjs.development.js

@@ -18,6 +18,2 @@ 'use strict';
 
-var easeInOutCubic = (function (t) {
-  return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
-});
-
 var findNearestBinarySearch = (function (low, high, input, getVal) {
@@ -167,5 +163,9 @@ while (low <= high) {
       _ref2$scrollDuration = _ref2.scrollDuration,
-      scrollDuration = _ref2$scrollDuration === void 0 ? 500 : _ref2$scrollDuration,
+      scrollDuration = _ref2$scrollDuration === void 0 ? function (d) {
+    return Math.min(Math.max(d * 0.075, 100), 500);
+  } : _ref2$scrollDuration,
       _ref2$scrollEasingFun = _ref2.scrollEasingFunction,
-      scrollEasingFunction = _ref2$scrollEasingFun === void 0 ? easeInOutCubic : _ref2$scrollEasingFun,
+      scrollEasingFunction = _ref2$scrollEasingFun === void 0 ? function (t) {
+    return -(Math.cos(Math.PI * t) - 1) / 2;
+  } : _ref2$scrollEasingFun,
       _ref2$loadMoreCount = _ref2.loadMoreCount,
@@ -185,2 +185,3 @@ loadMoreCount = _ref2$loadMoreCount === void 0 ? 15 : _ref2$loadMoreCount,
   var isMountedRef = react.useRef(false);
+  var isScrollToItemRef = react.useRef(false);
   var hasDynamicSizeRef = react.useRef(false);
@@ -201,5 +202,6 @@ var rosRef = react.useRef(new Map());
   var stickyIndicesRef = react.useRef(stickyIndices);
+  var durationRef = useLatest(scrollDuration);
+  var easingFnRef = useLatest(scrollEasingFunction);
   var isItemLoadedRef = react.useRef(isItemLoaded);
   var loadMoreRef = useLatest(loadMore);
-  var easingFnRef = useLatest(scrollEasingFunction);
   var itemSizeRef = useLatest(itemSize);
@@ -245,3 +247,3 @@ var useIsScrollingRef = useLatest(useIsScrolling);
     if (hasDynamicSizeRef.current) {
-      while (vStart < msData.length && // To prevent items from jumping while backward scrolling in dynamic size
+      while (vStart < msData.length && // To prevent dynamic size from jumping during backward scrolling
       msData[vStart].start < ((_msData$start = (_msData = msData[vStart + 1]) == null ? void 0 : _msData.start) != null ? _msData$start : 0) && msData[vStart].start + msData[vStart].size < scrollOffset) {
@@ -303,3 +305,5 @@ var _msData$start, _msData;
     var scroll = function scroll() {
-      var time = Math.min((now() - start) / scrollDuration, 1);
+      var duration = durationRef.current;
+      duration = isNumber(duration) ? duration : duration(Math.abs(offset - prevOffset));
+      var time = Math.min((now() - start) / duration, 1);
       var easing = easingFnRef.current(time);
@@ -316,3 +320,3 @@ scrollTo(easing * (offset - prevOffset) + prevOffset);
     scrollToRafRef.current = requestAnimationFrame(scroll);
-  }, [easingFnRef, scrollDuration, scrollTo]);
+  }, [durationRef, easingFnRef, scrollTo]);
   var scrollToItem = react.useCallback(function (val, cb) {
@@ -328,2 +332,4 @@ var _ref4 = isNumber(val) ? {
     if (!isNumber(index)) return;
+    isScrollToItemRef.current = true; // For dynamic size, we must measure it for getting the correct scroll position
+
     if (hasDynamicSizeRef.current) measureItems();
@@ -336,5 +342,5 @@ var msData = msDataRef.current;
         size = ms.size;
-    var scrollOffset = scrollOffsetRef.current;
     var totalSize = msData[msData.length - 1].end;
     var outerSize = outerRectRef.current[sizeKey];
+    var scrollOffset = scrollOffsetRef.current;
 
@@ -346,27 +352,9 @@ if (totalSize <= outerSize) {
 
-    var endPos = start - outerSize + size;
-
-    switch (align) {
-      case Align.start:
-        scrollOffset = totalSize - start <= outerSize ? totalSize - outerSize : start;
-        break;
-
-      case Align.center:
-        {
-          var to = start - outerSize / 2 + size / 2;
-          scrollOffset = totalSize - to <= outerSize ? totalSize - outerSize : to;
-          break;
-        }
-
-      case Align.end:
-        scrollOffset = start + size <= outerSize ? 0 : endPos;
-        break;
-
-      default:
-        if (scrollOffset > start) {
-          scrollOffset = start;
-        } else if (scrollOffset + outerSize < end) {
-          scrollOffset = endPos;
-        }
-
+    if (align === Align.start || align === Align.auto && scrollOffset > start) {
+      scrollOffset = totalSize - start <= outerSize ? totalSize - outerSize : start;
+    } else if (align === Align.end || align === Align.auto && scrollOffset + outerSize < end) {
+      scrollOffset = start + size <= outerSize ? 0 : start - outerSize + size;
+    } else if (align === Align.center && start + size / 2 > outerSize / 2) {
+      var to = start - outerSize / 2 + size / 2;
+      scrollOffset = totalSize - to <= outerSize ? totalSize - outerSize : to;
     }
@@ -402,5 +390,6 @@
     userScrollRef.current = true;
+    isScrollToItemRef.current = false;
   }, DEBOUNCE_INTERVAL),
-      resetUserScroll = _useDebounce2[0],
-      cancelResetUserScroll = _useDebounce2[1];
+      resetScrollTo = _useDebounce2[0],
+      cancelResetScrollTo = _useDebounce2[1];
 
@@ -467,5 +456,6 @@ var handleScroll = react.useCallback(function (scrollOffset, isScrolling, uxScrolling) {
             if (measuredSize !== size || start !== prevEnd) {
+              // To prevent dynamic size from jumping during backward scrolling
               if (i < prevItemIdxRef.current && start < scrollOffset) scrollTo(scrollOffset + measuredSize - size);
               msDataRef.current[i] = getMeasure(i, measuredSize);
-              handleScroll(scrollOffset, isScrolling, uxScrolling);
+              if (!isScrollToItemRef.current) handleScroll(scrollOffset, isScrolling, uxScrolling);
               hasDynamicSizeRef.current = true;
@@ -515,2 +505,3 @@ }
     if (!isScrolling) return;
+    var userScroll = userScrollRef.current;
     if (onScrollRef.current) onScrollRef.current({
@@ -523,3 +514,3 @@ overscanStartIndex: oStart,
       scrollForward: scrollOffset > scrollOffsetRef.current,
-      userScroll: userScrollRef.current
+      userScroll: userScroll
     });
@@ -533,8 +524,8 @@ var loadIndex = Math.floor((vStop + 1) / loadMoreCount);
       scrollOffset: scrollOffset,
-      userScroll: userScrollRef.current
+      userScroll: userScroll
     });
     prevVStopRef.current = vStop;
     if (uxScrolling) resetIsScrolling();
-    if (!userScrollRef.current) resetUserScroll();
-  }, [getCalcData, getMeasure, itemCount, loadMoreCount, loadMoreRef, marginKey, onScrollRef, resetIsScrolling, resetUserScroll, scrollTo, sizeKey]);
+    if (!userScroll) resetScrollTo();
+  }, [getCalcData, getMeasure, itemCount, loadMoreCount, loadMoreRef, marginKey, onScrollRef, resetIsScrolling, resetScrollTo, scrollTo, sizeKey]);
   useResizeEffect(outerRef, function (rect) {
@@ -586,3 +577,3 @@ var _msDataRef$current2;
       cancelResetIsScrolling();
-      cancelResetUserScroll();
+      cancelResetScrollTo();
 
@@ -600,3 +591,3 @@ if (scrollToRafRef.current) {
     };
-  }, [cancelResetIsScrolling, cancelResetUserScroll, handleScroll, scrollKey, useIsScrollingRef]);
+  }, [cancelResetIsScrolling, cancelResetScrollTo, handleScroll, scrollKey, useIsScrollingRef]);
   return {
@@ -603,0 +594,0 @@ outerRef: outerRef,

dist/index.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r,e,n=require("react");(e=r||(r={})).auto="auto",e.start="start",e.center="center",e.end="end";var t=function(r){return.5>r?4*r*r*r:(r-1)*(2*r-2)*(2*r-2)+1},u=function(r,e,n,t){for(;r<=e;){var u=(r+e)/2|0,c=t(u);if(n<c)e=u-1;else{if(!(n>c))return u;r=u+1}}return 0<r?r-1:0},c=function(r){return"number"==typeof r&&!Number.isNaN(r)},i=function(){return"performance"in window?performance.now():Date.now()},o=function(r){var e=n.useRef(r);return e.current=r,e},a=function(r,e){var t=n.useRef(),u=o(r),c=n.useCallback((function(){t.current&&(cancelAnimationFrame(t.current),t.current=void 0)}),[]),a=n.useCallback((function(r){i()-r>=e?u.current():t.current=requestAnimationFrame((function(){return a(r)}))}),[u,e]);return[n.useCallback((function(){c(),a(i())}),[c,a]),c]},s="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;exports.default=function(e){var l=e.itemCount,f=e.ssrItemCount,d=e.itemSize,v=void 0===d?50:d;d=e.horizontal;var h=e.overscanCount,m=void 0===h?1:h;h=e.useIsScrolling;var g=e.stickyIndices,b=e.scrollDuration,R=void 0===b?500:b;b=void 0===(b=e.scrollEasingFunction)?t:b;var p=e.loadMoreCount,x=void 0===p?15:p;p=e.isItemLoaded;var S=e.loadMore,w=e.onScroll,k=e.onResize,z=n.useState((function(){return function(r,e){if(!e)return[];var n=c(e)?[0,e-1]:e;e=n[1];var t=[];for(n=n[0];n<=e;n+=1){var u;t[n]={index:n,start:0,width:0,size:c(r)?r:null!=(u=r(n,0))?u:50,measureRef:function(){return null}}}return t}(v,f)}));e=z[0];var y=z[1],C=n.useRef(!1),I=n.useRef(!1),M=n.useRef(new Map),A=n.useRef(0),F=n.useRef(-1),O=n.useRef(),E=n.useRef(null),L=n.useRef(null),T=n.useRef({width:0,height:0}),q=n.useRef([]),j=n.useRef(!0),N=n.useRef(),D=n.useRef(g),_=n.useRef(p),B=o(S),P=o(b),G=o(v),H=o(h),J=o(w),K=o(k),Q=d?"width":"height",U=d?"marginLeft":"marginTop",V=d?"scrollLeft":"scrollTop",W=n.useCallback((function(r){var e,n=G.current;return c(n)?n:null!=(e=n(r,T.current.width))?e:50}),[G]),X=n.useCallback((function(r,e){var n,t,u=null!=(n=null==(t=q.current[r-1])?void 0:t.end)?n:0;return{idx:r,start:u,end:u+e,size:e}}),[]),Y=n.useCallback((function(r){void 0===r&&(r=!0),q.current.length=l;for(var e=0;e<l;e+=1)q.current[e]=X(e,r&&q.current[e]?q.current[e].size:W(e))}),[W,X,l]),Z=n.useCallback((function(r){var e=q.current,n=0;if(I.current)for(;n<e.length&&e[n].start<(null!=(t=null==(c=e[n+1])?void 0:c.start)?t:0)&&e[n].start+e[n].size<r;){var t,c;n+=1}else n=u(0,e.length-1,r,(function(r){return e[r].start}));for(c=e[t=n].start;t<e.length&&c<r+T.current[Q];)c+=e[t].size,t+=1;r=Math.max(n-m,0),c=Math.min(t+m,e.length)-1;var i=e[r].start;return{oStart:r,oStop:c,vStart:n,vStop:t-1,margin:i,innerSize:Math[c<e.length-1?"max":"min"](e[c].end+e[c].size,e[e.length-1].end)-i}}),[m,Q]),$=n.useCallback((function(r){E.current&&(E.current[V]=r)}),[V]),rr=n.useCallback((function(r,e){var n=A.current,t=(r=c(r)?{offset:r}:r).offset;if(r=r.smooth,c(t))if(j.current=!1,r){var u=i();N.current=requestAnimationFrame((function r(){var c=Math.min((i()-u)/R,1),o=P.current(c);$(o*(t-n)+n),1>c?N.current=requestAnimationFrame(r):e&&e()}))}else $(t),e&&e()}),[P,R,$]),er=n.useCallback((function(e,n){var t=c(e)?{index:e}:e,u=t.index,i=t.align;if(i=void 0===i?r.auto:i,t=t.smooth,c(u)){I.current&&Y();var o=q.current,a=o[Math.max(0,Math.min(u,o.length-1))];if(a){u=a.start;var s=a.end;a=a.size;var l=A.current;o=o[o.length-1].end;var f=T.current[Q];if(o<=f)n&&n();else{var d=u-f+a;switch(i){case r.start:l=o-u<=f?o-f:u;break;case r.center:l=o-(i=u-f/2+a/2)<=f?o-f:i;break;case r.end:l=u+a<=f?0:d;break;default:l>u?l=u:l+f<s&&(l=d)}I.current&&1>=Math.abs(l-A.current)?n&&n():rr({offset:l,smooth:t},(function(){I.current?setTimeout((function(){return er(e,n)})):n&&n()}))}}}}),[Y,rr,Q]),nr=(d=a((function(){return ir(A.current)}),150))[0],tr=d[1],ur=(d=a((function(){j.current=!0}),150))[0],cr=d[1],ir=n.useCallback((function(r,e,n){if(L.current)if(!B.current||C.current||_.current&&_.current(0)||B.current({startIndex:0,stopIndex:x-1,loadIndex:0,scrollOffset:r,userScroll:j.current}),l){var t=Z(r),c=t.oStart,i=t.oStop,o=t.vStart,a=t.vStop,s=t.margin;t=t.innerSize,L.current.style[U]=s+"px",L.current.style[Q]=t+"px";for(var f=[],d=Array.isArray(D.current)?D.current:[],v=function(t){var u=q.current,c=u[t],i=c.start,o=c.size;f.push({index:t,start:i-s,size:o,width:T.current.width,isScrolling:n||void 0,isSticky:d.includes(t)||void 0,measureRef:function(c){c&&new ResizeObserver((function(c,a){var s,l,f,d=(c=c[0].target).getBoundingClientRect()[Q];if(d){var v=null!=(s=null==(l=u[t-1])?void 0:l.end)?s:0;d===o&&i===v||(t<F.current&&i<r&&$(r+d-o),q.current[t]=X(t,d),ir(r,e,n),I.current=!0),F.current=t,null==(f=M.current.get(c))||f.disconnect(),M.current.set(c,a)}else a.disconnect(),M.current.delete(c)})).observe(c)}})},h=c;h<=i;h+=1)v(h);d.length&&(c>(v=d[u(0,d.length-1,o,(function(r){return d[r]}))])&&(h=q.current[v].size,f.unshift({index:v,start:0,size:h,width:T.current.width,isScrolling:n||void 0,isSticky:!0,measureRef:function(){return null}}),L.current.style[U]=s-h+"px",L.current.style[Q]=t+h+"px")),y((function(r){return function(r,e,n){if(r.length!==e.length)return!0;for(var t=function(t){if(Object.keys(r[t]).some((function(u){return!n[u]&&r[t][u]!==e[t][u]})))return{v:!0}},u=0;u<r.length;u+=1){var c=t(u);if("object"==typeof c)return c.v}return!1}(r,f,{measureRef:!0})?f:r})),e&&(J.current&&J.current({overscanStartIndex:c,overscanStopIndex:i,visibleStartIndex:o,visibleStopIndex:a,scrollOffset:r,scrollForward:r>A.current,userScroll:j.current}),i=(c=Math.floor((a+1)/x))*x,!B.current||a===O.current||_.current&&_.current(c)||B.current({startIndex:i,stopIndex:i+x-1,loadIndex:c,scrollOffset:r,userScroll:j.current}),O.current=a,n&&nr(),j.current||ur())}else y([])}),[Z,X,l,x,B,U,J,nr,ur,$,Q]);return function(r,e,n){var t=o(e);s((function(){if(!r.current)return function(){return null};var e=new ResizeObserver((function(r){r=r[0].contentRect,t.current({width:r.width,height:r.height})}));return e.observe(r.current),function(){return e.disconnect()}}),[t,r].concat(n))}(E,(function(r){var e,n=T.current,t=n.height;t=(n=n.width===r.width)&&t===r.height;var u,c=null==(e=q.current[q.current.length-1])?void 0:e.end;(T.current=r,Y(I.current),ir(A.current),I.current||n)||(e=null==(u=q.current[q.current.length-1])?void 0:u.end,$(A.current*(e/c||1)));C.current&&!t&&K.current&&K.current(r),C.current=!0}),[l,ir,Y,K,$]),s((function(){var r=E.current;if(!r)return function(){return null};var e=function(r){if((r=r.target[V])!==A.current){var e=H.current;e="function"==typeof e?e(Math.abs(r-A.current)):e,ir(r,!0,e),A.current=r}};r.addEventListener("scroll",e,{passive:!0});var n=M.current;return function(){tr(),cr(),N.current&&(cancelAnimationFrame(N.current),N.current=void 0),r.removeEventListener("scroll",e),n.forEach((function(r){return r.disconnect()})),n.clear()}}),[tr,cr,ir,V,H]),{outerRef:E,innerRef:L,items:e,scrollTo:rr,scrollToItem:er}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r,e,t=require("react");(e=r||(r={})).auto="auto",e.start="start",e.center="center",e.end="end";var n=function(r,e,t,n){for(;r<=e;){var u=(r+e)/2|0,c=n(u);if(t<c)e=u-1;else{if(!(t>c))return u;r=u+1}}return 0<r?r-1:0},u=function(r){return"number"==typeof r&&!Number.isNaN(r)},c=function(){return"performance"in window?performance.now():Date.now()},i=function(r){var e=t.useRef(r);return e.current=r,e},o=function(r,e){var n=t.useRef(),u=i(r),o=t.useCallback((function(){n.current&&(cancelAnimationFrame(n.current),n.current=void 0)}),[]),a=t.useCallback((function(r){c()-r>=e?u.current():n.current=requestAnimationFrame((function(){return a(r)}))}),[u,e]);return[t.useCallback((function(){o(),a(c())}),[o,a]),o]},a="undefined"!=typeof window?t.useLayoutEffect:t.useEffect;exports.default=function(e){var s=e.itemCount,l=e.ssrItemCount,f=e.itemSize,d=void 0===f?50:f;f=e.horizontal;var v=e.overscanCount,h=void 0===v?1:v;v=e.useIsScrolling;var m=e.stickyIndices,g=e.scrollDuration;g=void 0===g?function(r){return Math.min(Math.max(.075*r,100),500)}:g;var R=e.scrollEasingFunction;R=void 0===R?function(r){return-(Math.cos(Math.PI*r)-1)/2}:R;var p=e.loadMoreCount,x=void 0===p?15:p;p=e.isItemLoaded;var b=e.loadMore,S=e.onScroll,w=e.onResize,z=t.useState((function(){return function(r,e){if(!e)return[];var t=u(e)?[0,e-1]:e;e=t[1];var n=[];for(t=t[0];t<=e;t+=1){var c;n[t]={index:t,start:0,width:0,size:u(r)?r:null!=(c=r(t,0))?c:50,measureRef:function(){return null}}}return n}(d,l)}));e=z[0];var M=z[1],y=t.useRef(!1),C=t.useRef(!1),I=t.useRef(!1),k=t.useRef(new Map),A=t.useRef(0),F=t.useRef(-1),O=t.useRef(),E=t.useRef(null),L=t.useRef(null),T=t.useRef({width:0,height:0}),q=t.useRef([]),j=t.useRef(!0),N=t.useRef(),D=t.useRef(m),P=i(g),_=i(R),B=t.useRef(p),G=i(b),H=i(d),J=i(v),K=i(S),Q=i(w),U=f?"width":"height",V=f?"marginLeft":"marginTop",W=f?"scrollLeft":"scrollTop",X=t.useCallback((function(r){var e,t=H.current;return u(t)?t:null!=(e=t(r,T.current.width))?e:50}),[H]),Y=t.useCallback((function(r,e){var t,n,u=null!=(t=null==(n=q.current[r-1])?void 0:n.end)?t:0;return{idx:r,start:u,end:u+e,size:e}}),[]),Z=t.useCallback((function(r){void 0===r&&(r=!0),q.current.length=s;for(var e=0;e<s;e+=1)q.current[e]=Y(e,r&&q.current[e]?q.current[e].size:X(e))}),[X,Y,s]),$=t.useCallback((function(r){var e=q.current,t=0;if(I.current)for(;t<e.length&&e[t].start<(null!=(u=null==(c=e[t+1])?void 0:c.start)?u:0)&&e[t].start+e[t].size<r;){var u,c;t+=1}else t=n(0,e.length-1,r,(function(r){return e[r].start}));for(c=e[u=t].start;u<e.length&&c<r+T.current[U];)c+=e[u].size,u+=1;r=Math.max(t-h,0),c=Math.min(u+h,e.length)-1;var i=e[r].start;return{oStart:r,oStop:c,vStart:t,vStop:u-1,margin:i,innerSize:Math[c<e.length-1?"max":"min"](e[c].end+e[c].size,e[e.length-1].end)-i}}),[h,U]),rr=t.useCallback((function(r){E.current&&(E.current[W]=r)}),[W]),er=t.useCallback((function(r,e){var t=A.current,n=(r=u(r)?{offset:r}:r).offset;if(r=r.smooth,u(n))if(j.current=!1,r){var i=c();N.current=requestAnimationFrame((function r(){var o=P.current;o=u(o)?o:o(Math.abs(n-t)),o=Math.min((c()-i)/o,1);var a=_.current(o);rr(a*(n-t)+t),1>o?N.current=requestAnimationFrame(r):e&&e()}))}else rr(n),e&&e()}),[P,_,rr]),tr=t.useCallback((function(e,t){var n=u(e)?{index:e}:e,c=n.index,i=n.align;if(i=void 0===i?r.auto:i,n=n.smooth,u(c)){C.current=!0,I.current&&Z();var o=q.current,a=o[Math.max(0,Math.min(c,o.length-1))];if(a){c=a.start;var s=a.end;a=a.size,o=o[o.length-1].end;var l=T.current[U],f=A.current;o<=l?t&&t():(i===r.start||i===r.auto&&f>c?f=o-c<=l?o-l:c:i===r.end||i===r.auto&&f+l<s?f=c+a<=l?0:c-l+a:i===r.center&&c+a/2>l/2&&(f=o-(i=c-l/2+a/2)<=l?o-l:i),I.current&&1>=Math.abs(f-A.current)?t&&t():er({offset:f,smooth:n},(function(){I.current?setTimeout((function(){return tr(e,t)})):t&&t()})))}}}),[Z,er,U]),nr=(f=o((function(){return or(A.current)}),150))[0],ur=f[1],cr=(f=o((function(){j.current=!0,C.current=!1}),150))[0],ir=f[1],or=t.useCallback((function(r,e,t){if(L.current)if(!G.current||y.current||B.current&&B.current(0)||G.current({startIndex:0,stopIndex:x-1,loadIndex:0,scrollOffset:r,userScroll:j.current}),s){var u=$(r),c=u.oStart,i=u.oStop,o=u.vStart,a=u.vStop,l=u.margin;u=u.innerSize,L.current.style[V]=l+"px",L.current.style[U]=u+"px";for(var f=[],d=Array.isArray(D.current)?D.current:[],v=function(n){var u=q.current,c=u[n],i=c.start,o=c.size;f.push({index:n,start:i-l,size:o,width:T.current.width,isScrolling:t||void 0,isSticky:d.includes(n)||void 0,measureRef:function(c){c&&new ResizeObserver((function(c,a){var s,l,f,d=(c=c[0].target).getBoundingClientRect()[U];if(d){var v=null!=(s=null==(l=u[n-1])?void 0:l.end)?s:0;d===o&&i===v||(n<F.current&&i<r&&rr(r+d-o),q.current[n]=Y(n,d),C.current||or(r,e,t),I.current=!0),F.current=n,null==(f=k.current.get(c))||f.disconnect(),k.current.set(c,a)}else a.disconnect(),k.current.delete(c)})).observe(c)}})},h=c;h<=i;h+=1)v(h);d.length&&(c>(v=d[n(0,d.length-1,o,(function(r){return d[r]}))])&&(h=q.current[v].size,f.unshift({index:v,start:0,size:h,width:T.current.width,isScrolling:t||void 0,isSticky:!0,measureRef:function(){return null}}),L.current.style[V]=l-h+"px",L.current.style[U]=u+h+"px")),M((function(r){return function(r,e,t){if(r.length!==e.length)return!0;for(var n=function(n){if(Object.keys(r[n]).some((function(u){return!t[u]&&r[n][u]!==e[n][u]})))return{v:!0}},u=0;u<r.length;u+=1){var c=n(u);if("object"==typeof c)return c.v}return!1}(r,f,{measureRef:!0})?f:r})),e&&(u=j.current,K.current&&K.current({overscanStartIndex:c,overscanStopIndex:i,visibleStartIndex:o,visibleStopIndex:a,scrollOffset:r,scrollForward:r>A.current,userScroll:u}),i=(c=Math.floor((a+1)/x))*x,!G.current||a===O.current||B.current&&B.current(c)||G.current({startIndex:i,stopIndex:i+x-1,loadIndex:c,scrollOffset:r,userScroll:u}),O.current=a,t&&nr(),u||cr())}else M([])}),[$,Y,s,x,G,V,K,nr,cr,rr,U]);return function(r,e,t){var n=i(e);a((function(){if(!r.current)return function(){return null};var e=new ResizeObserver((function(r){r=r[0].contentRect,n.current({width:r.width,height:r.height})}));return e.observe(r.current),function(){return e.disconnect()}}),[n,r].concat(t))}(E,(function(r){var e,t=T.current,n=t.height;n=(t=t.width===r.width)&&n===r.height;var u,c=null==(e=q.current[q.current.length-1])?void 0:e.end;(T.current=r,Z(I.current),or(A.current),I.current||t)||(e=null==(u=q.current[q.current.length-1])?void 0:u.end,rr(A.current*(e/c||1)));y.current&&!n&&Q.current&&Q.current(r),y.current=!0}),[s,or,Z,Q,rr]),a((function(){var r=E.current;if(!r)return function(){return null};var e=function(r){if((r=r.target[W])!==A.current){var e=J.current;e="function"==typeof e?e(Math.abs(r-A.current)):e,or(r,!0,e),A.current=r}};r.addEventListener("scroll",e,{passive:!0});var t=k.current;return function(){ur(),ir(),N.current&&(cancelAnimationFrame(N.current),N.current=void 0),r.removeEventListener("scroll",e),t.forEach((function(r){return r.disconnect()})),t.clear()}}),[ur,ir,or,W,J]),{outerRef:E,innerRef:L,items:e,scrollTo:er,scrollToItem:tr}};
 //# sourceMappingURL=index.cjs.production.min.js.map

dist/index.d.ts

@@ -16,2 +16,4 @@ declare module "react-cool-virtual" {
 
+  export type ScrollDuration = number | ((distance: number) => number);
+
   export interface ScrollEasingFunction {
@@ -105,3 +107,3 @@ (time: number): number;
     stickyIndices?: number[];
-    scrollDuration?: number;
+    scrollDuration?: ScrollDuration;
     scrollEasingFunction?: ScrollEasingFunction;
@@ -108,0 +110,0 @@ loadMoreCount?: number;

dist/index.esm.js

@@ -14,6 +14,2 @@ import { useRef, useCallback, useLayoutEffect, useEffect, useState } from 'react';
 
-var easeInOutCubic = (function (t) {
-  return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
-});
-
 var findNearestBinarySearch = (function (low, high, input, getVal) {
@@ -163,5 +159,9 @@ while (low <= high) {
       _ref2$scrollDuration = _ref2.scrollDuration,
-      scrollDuration = _ref2$scrollDuration === void 0 ? 500 : _ref2$scrollDuration,
+      scrollDuration = _ref2$scrollDuration === void 0 ? function (d) {
+    return Math.min(Math.max(d * 0.075, 100), 500);
+  } : _ref2$scrollDuration,
       _ref2$scrollEasingFun = _ref2.scrollEasingFunction,
-      scrollEasingFunction = _ref2$scrollEasingFun === void 0 ? easeInOutCubic : _ref2$scrollEasingFun,
+      scrollEasingFunction = _ref2$scrollEasingFun === void 0 ? function (t) {
+    return -(Math.cos(Math.PI * t) - 1) / 2;
+  } : _ref2$scrollEasingFun,
       _ref2$loadMoreCount = _ref2.loadMoreCount,
@@ -181,2 +181,3 @@ loadMoreCount = _ref2$loadMoreCount === void 0 ? 15 : _ref2$loadMoreCount,
   var isMountedRef = useRef(false);
+  var isScrollToItemRef = useRef(false);
   var hasDynamicSizeRef = useRef(false);
@@ -197,5 +198,6 @@ var rosRef = useRef(new Map());
   var stickyIndicesRef = useRef(stickyIndices);
+  var durationRef = useLatest(scrollDuration);
+  var easingFnRef = useLatest(scrollEasingFunction);
   var isItemLoadedRef = useRef(isItemLoaded);
   var loadMoreRef = useLatest(loadMore);
-  var easingFnRef = useLatest(scrollEasingFunction);
   var itemSizeRef = useLatest(itemSize);
@@ -241,3 +243,3 @@ var useIsScrollingRef = useLatest(useIsScrolling);
     if (hasDynamicSizeRef.current) {
-      while (vStart < msData.length && // To prevent items from jumping while backward scrolling in dynamic size
+      while (vStart < msData.length && // To prevent dynamic size from jumping during backward scrolling
       msData[vStart].start < ((_msData$start = (_msData = msData[vStart + 1]) == null ? void 0 : _msData.start) != null ? _msData$start : 0) && msData[vStart].start + msData[vStart].size < scrollOffset) {
@@ -299,3 +301,5 @@ var _msData$start, _msData;
     var scroll = function scroll() {
-      var time = Math.min((now() - start) / scrollDuration, 1);
+      var duration = durationRef.current;
+      duration = isNumber(duration) ? duration : duration(Math.abs(offset - prevOffset));
+      var time = Math.min((now() - start) / duration, 1);
       var easing = easingFnRef.current(time);
@@ -312,3 +316,3 @@ scrollTo(easing * (offset - prevOffset) + prevOffset);
     scrollToRafRef.current = requestAnimationFrame(scroll);
-  }, [easingFnRef, scrollDuration, scrollTo]);
+  }, [durationRef, easingFnRef, scrollTo]);
   var scrollToItem = useCallback(function (val, cb) {
@@ -324,2 +328,4 @@ var _ref4 = isNumber(val) ? {
     if (!isNumber(index)) return;
+    isScrollToItemRef.current = true; // For dynamic size, we must measure it for getting the correct scroll position
+
     if (hasDynamicSizeRef.current) measureItems();
@@ -332,5 +338,5 @@ var msData = msDataRef.current;
         size = ms.size;
-    var scrollOffset = scrollOffsetRef.current;
     var totalSize = msData[msData.length - 1].end;
     var outerSize = outerRectRef.current[sizeKey];
+    var scrollOffset = scrollOffsetRef.current;
 
@@ -342,27 +348,9 @@ if (totalSize <= outerSize) {
 
-    var endPos = start - outerSize + size;
-
-    switch (align) {
-      case Align.start:
-        scrollOffset = totalSize - start <= outerSize ? totalSize - outerSize : start;
-        break;
-
-      case Align.center:
-        {
-          var to = start - outerSize / 2 + size / 2;
-          scrollOffset = totalSize - to <= outerSize ? totalSize - outerSize : to;
-          break;
-        }
-
-      case Align.end:
-        scrollOffset = start + size <= outerSize ? 0 : endPos;
-        break;
-
-      default:
-        if (scrollOffset > start) {
-          scrollOffset = start;
-        } else if (scrollOffset + outerSize < end) {
-          scrollOffset = endPos;
-        }
-
+    if (align === Align.start || align === Align.auto && scrollOffset > start) {
+      scrollOffset = totalSize - start <= outerSize ? totalSize - outerSize : start;
+    } else if (align === Align.end || align === Align.auto && scrollOffset + outerSize < end) {
+      scrollOffset = start + size <= outerSize ? 0 : start - outerSize + size;
+    } else if (align === Align.center && start + size / 2 > outerSize / 2) {
+      var to = start - outerSize / 2 + size / 2;
+      scrollOffset = totalSize - to <= outerSize ? totalSize - outerSize : to;
     }
@@ -398,5 +386,6 @@
     userScrollRef.current = true;
+    isScrollToItemRef.current = false;
   }, DEBOUNCE_INTERVAL),
-      resetUserScroll = _useDebounce2[0],
-      cancelResetUserScroll = _useDebounce2[1];
+      resetScrollTo = _useDebounce2[0],
+      cancelResetScrollTo = _useDebounce2[1];
 
@@ -463,5 +452,6 @@ var handleScroll = useCallback(function (scrollOffset, isScrolling, uxScrolling) {
             if (measuredSize !== size || start !== prevEnd) {
+              // To prevent dynamic size from jumping during backward scrolling
               if (i < prevItemIdxRef.current && start < scrollOffset) scrollTo(scrollOffset + measuredSize - size);
               msDataRef.current[i] = getMeasure(i, measuredSize);
-              handleScroll(scrollOffset, isScrolling, uxScrolling);
+              if (!isScrollToItemRef.current) handleScroll(scrollOffset, isScrolling, uxScrolling);
               hasDynamicSizeRef.current = true;
@@ -511,2 +501,3 @@ }
     if (!isScrolling) return;
+    var userScroll = userScrollRef.current;
     if (onScrollRef.current) onScrollRef.current({
@@ -519,3 +510,3 @@ overscanStartIndex: oStart,
       scrollForward: scrollOffset > scrollOffsetRef.current,
-      userScroll: userScrollRef.current
+      userScroll: userScroll
     });
@@ -529,8 +520,8 @@ var loadIndex = Math.floor((vStop + 1) / loadMoreCount);
       scrollOffset: scrollOffset,
-      userScroll: userScrollRef.current
+      userScroll: userScroll
     });
     prevVStopRef.current = vStop;
     if (uxScrolling) resetIsScrolling();
-    if (!userScrollRef.current) resetUserScroll();
-  }, [getCalcData, getMeasure, itemCount, loadMoreCount, loadMoreRef, marginKey, onScrollRef, resetIsScrolling, resetUserScroll, scrollTo, sizeKey]);
+    if (!userScroll) resetScrollTo();
+  }, [getCalcData, getMeasure, itemCount, loadMoreCount, loadMoreRef, marginKey, onScrollRef, resetIsScrolling, resetScrollTo, scrollTo, sizeKey]);
   useResizeEffect(outerRef, function (rect) {
@@ -582,3 +573,3 @@ var _msDataRef$current2;
       cancelResetIsScrolling();
-      cancelResetUserScroll();
+      cancelResetScrollTo();
 
@@ -596,3 +587,3 @@ if (scrollToRafRef.current) {
     };
-  }, [cancelResetIsScrolling, cancelResetUserScroll, handleScroll, scrollKey, useIsScrollingRef]);
+  }, [cancelResetIsScrolling, cancelResetScrollTo, handleScroll, scrollKey, useIsScrollingRef]);
   return {
@@ -599,0 +590,0 @@ outerRef: outerRef,

dist/index.umd.development.js

@@ -18,6 +18,2 @@ (function (global, factory) {
 
-  var easeInOutCubic = (function (t) {
-    return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
-  });
-
   var findNearestBinarySearch = (function (low, high, input, getVal) {
@@ -167,5 +163,9 @@ while (low <= high) {
         _ref2$scrollDuration = _ref2.scrollDuration,
-        scrollDuration = _ref2$scrollDuration === void 0 ? 500 : _ref2$scrollDuration,
+        scrollDuration = _ref2$scrollDuration === void 0 ? function (d) {
+      return Math.min(Math.max(d * 0.075, 100), 500);
+    } : _ref2$scrollDuration,
         _ref2$scrollEasingFun = _ref2.scrollEasingFunction,
-        scrollEasingFunction = _ref2$scrollEasingFun === void 0 ? easeInOutCubic : _ref2$scrollEasingFun,
+        scrollEasingFunction = _ref2$scrollEasingFun === void 0 ? function (t) {
+      return -(Math.cos(Math.PI * t) - 1) / 2;
+    } : _ref2$scrollEasingFun,
         _ref2$loadMoreCount = _ref2.loadMoreCount,
@@ -185,2 +185,3 @@ loadMoreCount = _ref2$loadMoreCount === void 0 ? 15 : _ref2$loadMoreCount,
     var isMountedRef = react.useRef(false);
+    var isScrollToItemRef = react.useRef(false);
     var hasDynamicSizeRef = react.useRef(false);
@@ -201,5 +202,6 @@ var rosRef = react.useRef(new Map());
     var stickyIndicesRef = react.useRef(stickyIndices);
+    var durationRef = useLatest(scrollDuration);
+    var easingFnRef = useLatest(scrollEasingFunction);
     var isItemLoadedRef = react.useRef(isItemLoaded);
     var loadMoreRef = useLatest(loadMore);
-    var easingFnRef = useLatest(scrollEasingFunction);
     var itemSizeRef = useLatest(itemSize);
@@ -245,3 +247,3 @@ var useIsScrollingRef = useLatest(useIsScrolling);
       if (hasDynamicSizeRef.current) {
-        while (vStart < msData.length && // To prevent items from jumping while backward scrolling in dynamic size
+        while (vStart < msData.length && // To prevent dynamic size from jumping during backward scrolling
         msData[vStart].start < ((_msData$start = (_msData = msData[vStart + 1]) == null ? void 0 : _msData.start) != null ? _msData$start : 0) && msData[vStart].start + msData[vStart].size < scrollOffset) {
@@ -303,3 +305,5 @@ var _msData$start, _msData;
       var scroll = function scroll() {
-        var time = Math.min((now() - start) / scrollDuration, 1);
+        var duration = durationRef.current;
+        duration = isNumber(duration) ? duration : duration(Math.abs(offset - prevOffset));
+        var time = Math.min((now() - start) / duration, 1);
         var easing = easingFnRef.current(time);
@@ -316,3 +320,3 @@ scrollTo(easing * (offset - prevOffset) + prevOffset);
       scrollToRafRef.current = requestAnimationFrame(scroll);
-    }, [easingFnRef, scrollDuration, scrollTo]);
+    }, [durationRef, easingFnRef, scrollTo]);
     var scrollToItem = react.useCallback(function (val, cb) {
@@ -328,2 +332,4 @@ var _ref4 = isNumber(val) ? {
       if (!isNumber(index)) return;
+      isScrollToItemRef.current = true; // For dynamic size, we must measure it for getting the correct scroll position
+
       if (hasDynamicSizeRef.current) measureItems();
@@ -336,5 +342,5 @@ var msData = msDataRef.current;
           size = ms.size;
-      var scrollOffset = scrollOffsetRef.current;
       var totalSize = msData[msData.length - 1].end;
       var outerSize = outerRectRef.current[sizeKey];
+      var scrollOffset = scrollOffsetRef.current;
 
@@ -346,27 +352,9 @@ if (totalSize <= outerSize) {
 
-      var endPos = start - outerSize + size;
-
-      switch (align) {
-        case Align.start:
-          scrollOffset = totalSize - start <= outerSize ? totalSize - outerSize : start;
-          break;
-
-        case Align.center:
-          {
-            var to = start - outerSize / 2 + size / 2;
-            scrollOffset = totalSize - to <= outerSize ? totalSize - outerSize : to;
-            break;
-          }
-
-        case Align.end:
-          scrollOffset = start + size <= outerSize ? 0 : endPos;
-          break;
-
-        default:
-          if (scrollOffset > start) {
-            scrollOffset = start;
-          } else if (scrollOffset + outerSize < end) {
-            scrollOffset = endPos;
-          }
-
+      if (align === Align.start || align === Align.auto && scrollOffset > start) {
+        scrollOffset = totalSize - start <= outerSize ? totalSize - outerSize : start;
+      } else if (align === Align.end || align === Align.auto && scrollOffset + outerSize < end) {
+        scrollOffset = start + size <= outerSize ? 0 : start - outerSize + size;
+      } else if (align === Align.center && start + size / 2 > outerSize / 2) {
+        var to = start - outerSize / 2 + size / 2;
+        scrollOffset = totalSize - to <= outerSize ? totalSize - outerSize : to;
       }
@@ -402,5 +390,6 @@
       userScrollRef.current = true;
+      isScrollToItemRef.current = false;
     }, DEBOUNCE_INTERVAL),
-        resetUserScroll = _useDebounce2[0],
-        cancelResetUserScroll = _useDebounce2[1];
+        resetScrollTo = _useDebounce2[0],
+        cancelResetScrollTo = _useDebounce2[1];
 
@@ -467,5 +456,6 @@ var handleScroll = react.useCallback(function (scrollOffset, isScrolling, uxScrolling) {
               if (measuredSize !== size || start !== prevEnd) {
+                // To prevent dynamic size from jumping during backward scrolling
                 if (i < prevItemIdxRef.current && start < scrollOffset) scrollTo(scrollOffset + measuredSize - size);
                 msDataRef.current[i] = getMeasure(i, measuredSize);
-                handleScroll(scrollOffset, isScrolling, uxScrolling);
+                if (!isScrollToItemRef.current) handleScroll(scrollOffset, isScrolling, uxScrolling);
                 hasDynamicSizeRef.current = true;
@@ -515,2 +505,3 @@ }
       if (!isScrolling) return;
+      var userScroll = userScrollRef.current;
       if (onScrollRef.current) onScrollRef.current({
@@ -523,3 +514,3 @@ overscanStartIndex: oStart,
         scrollForward: scrollOffset > scrollOffsetRef.current,
-        userScroll: userScrollRef.current
+        userScroll: userScroll
       });
@@ -533,8 +524,8 @@ var loadIndex = Math.floor((vStop + 1) / loadMoreCount);
         scrollOffset: scrollOffset,
-        userScroll: userScrollRef.current
+        userScroll: userScroll
       });
       prevVStopRef.current = vStop;
       if (uxScrolling) resetIsScrolling();
-      if (!userScrollRef.current) resetUserScroll();
-    }, [getCalcData, getMeasure, itemCount, loadMoreCount, loadMoreRef, marginKey, onScrollRef, resetIsScrolling, resetUserScroll, scrollTo, sizeKey]);
+      if (!userScroll) resetScrollTo();
+    }, [getCalcData, getMeasure, itemCount, loadMoreCount, loadMoreRef, marginKey, onScrollRef, resetIsScrolling, resetScrollTo, scrollTo, sizeKey]);
     useResizeEffect(outerRef, function (rect) {
@@ -586,3 +577,3 @@ var _msDataRef$current2;
         cancelResetIsScrolling();
-        cancelResetUserScroll();
+        cancelResetScrollTo();
 
@@ -600,3 +591,3 @@ if (scrollToRafRef.current) {
       };
-    }, [cancelResetIsScrolling, cancelResetUserScroll, handleScroll, scrollKey, useIsScrollingRef]);
+    }, [cancelResetIsScrolling, cancelResetScrollTo, handleScroll, scrollKey, useIsScrollingRef]);
     return {
@@ -603,0 +594,0 @@ outerRef: outerRef,

dist/index.umd.production.min.js

@@ -1,2 +0,2 @@
-"use strict";!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).ReactCoolVirtual={},e.React)}(this,(function(e,r){var n,t;(t=n||(n={})).auto="auto",t.start="start",t.center="center",t.end="end";var u=function(e){return.5>e?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1},c=function(e,r,n,t){for(;e<=r;){var u=(e+r)/2|0,c=t(u);if(n<c)r=u-1;else{if(!(n>c))return u;e=u+1}}return 0<e?e-1:0},i=function(e){return"number"==typeof e&&!Number.isNaN(e)},o=function(){return"performance"in window?performance.now():Date.now()},a=function(e){var n=r.useRef(e);return n.current=e,n},s=function(e,n){var t=r.useRef(),u=a(e),c=r.useCallback((function(){t.current&&(cancelAnimationFrame(t.current),t.current=void 0)}),[]),i=r.useCallback((function(e){o()-e>=n?u.current():t.current=requestAnimationFrame((function(){return i(e)}))}),[u,n]);return[r.useCallback((function(){c(),i(o())}),[c,i]),c]},l="undefined"!=typeof window?r.useLayoutEffect:r.useEffect;e.useVirtual=function(e){var t=e.itemCount,f=e.ssrItemCount,d=e.itemSize,v=void 0===d?50:d;d=e.horizontal;var h=e.overscanCount,m=void 0===h?1:h;h=e.useIsScrolling;var g=e.stickyIndices,p=e.scrollDuration,b=void 0===p?500:p;p=void 0===(p=e.scrollEasingFunction)?u:p;var R=e.loadMoreCount,x=void 0===R?15:R;R=e.isItemLoaded;var S=e.loadMore,w=e.onScroll,y=e.onResize,k=r.useState((function(){return function(e,r){if(!r)return[];var n=i(r)?[0,r-1]:r;r=n[1];var t=[];for(n=n[0];n<=r;n+=1){var u;t[n]={index:n,start:0,width:0,size:i(e)?e:null!=(u=e(n,0))?u:50,measureRef:function(){return null}}}return t}(v,f)}));e=k[0];var z=k[1],C=r.useRef(!1),I=r.useRef(!1),M=r.useRef(new Map),A=r.useRef(0),F=r.useRef(-1),O=r.useRef(),T=r.useRef(null),E=r.useRef(null),L=r.useRef({width:0,height:0}),j=r.useRef([]),q=r.useRef(!0),N=r.useRef(),D=r.useRef(g),V=r.useRef(R),_=a(S),B=a(p),P=a(v),G=a(h),H=a(w),J=a(y),K=d?"width":"height",Q=d?"marginLeft":"marginTop",U=d?"scrollLeft":"scrollTop",W=r.useCallback((function(e){var r,n=P.current;return i(n)?n:null!=(r=n(e,L.current.width))?r:50}),[P]),X=r.useCallback((function(e,r){var n,t,u=null!=(n=null==(t=j.current[e-1])?void 0:t.end)?n:0;return{idx:e,start:u,end:u+r,size:r}}),[]),Y=r.useCallback((function(e){void 0===e&&(e=!0),j.current.length=t;for(var r=0;r<t;r+=1)j.current[r]=X(r,e&&j.current[r]?j.current[r].size:W(r))}),[W,X,t]),Z=r.useCallback((function(e){var r=j.current,n=0;if(I.current)for(;n<r.length&&r[n].start<(null!=(t=null==(u=r[n+1])?void 0:u.start)?t:0)&&r[n].start+r[n].size<e;){var t,u;n+=1}else n=c(0,r.length-1,e,(function(e){return r[e].start}));for(u=r[t=n].start;t<r.length&&u<e+L.current[K];)u+=r[t].size,t+=1;e=Math.max(n-m,0),u=Math.min(t+m,r.length)-1;var i=r[e].start;return{oStart:e,oStop:u,vStart:n,vStop:t-1,margin:i,innerSize:Math[u<r.length-1?"max":"min"](r[u].end+r[u].size,r[r.length-1].end)-i}}),[m,K]),$=r.useCallback((function(e){T.current&&(T.current[U]=e)}),[U]),ee=r.useCallback((function(e,r){var n=A.current,t=(e=i(e)?{offset:e}:e).offset;if(e=e.smooth,i(t))if(q.current=!1,e){var u=o();N.current=requestAnimationFrame((function e(){var c=Math.min((o()-u)/b,1),i=B.current(c);$(i*(t-n)+n),1>c?N.current=requestAnimationFrame(e):r&&r()}))}else $(t),r&&r()}),[B,b,$]),re=r.useCallback((function(e,r){var t=i(e)?{index:e}:e,u=t.index,c=t.align;if(c=void 0===c?n.auto:c,t=t.smooth,i(u)){I.current&&Y();var o=j.current,a=o[Math.max(0,Math.min(u,o.length-1))];if(a){u=a.start;var s=a.end;a=a.size;var l=A.current;o=o[o.length-1].end;var f=L.current[K];if(o<=f)r&&r();else{var d=u-f+a;switch(c){case n.start:l=o-u<=f?o-f:u;break;case n.center:l=o-(c=u-f/2+a/2)<=f?o-f:c;break;case n.end:l=u+a<=f?0:d;break;default:l>u?l=u:l+f<s&&(l=d)}I.current&&1>=Math.abs(l-A.current)?r&&r():ee({offset:l,smooth:t},(function(){I.current?setTimeout((function(){return re(e,r)})):r&&r()}))}}}}),[Y,ee,K]),ne=(d=s((function(){return ie(A.current)}),150))[0],te=d[1],ue=(d=s((function(){q.current=!0}),150))[0],ce=d[1],ie=r.useCallback((function(e,r,n){if(E.current)if(!_.current||C.current||V.current&&V.current(0)||_.current({startIndex:0,stopIndex:x-1,loadIndex:0,scrollOffset:e,userScroll:q.current}),t){var u=Z(e),i=u.oStart,o=u.oStop,a=u.vStart,s=u.vStop,l=u.margin;u=u.innerSize,E.current.style[Q]=l+"px",E.current.style[K]=u+"px";for(var f=[],d=Array.isArray(D.current)?D.current:[],v=function(t){var u=j.current,c=u[t],i=c.start,o=c.size;f.push({index:t,start:i-l,size:o,width:L.current.width,isScrolling:n||void 0,isSticky:d.includes(t)||void 0,measureRef:function(c){c&&new ResizeObserver((function(c,a){var s,l,f,d=(c=c[0].target).getBoundingClientRect()[K];if(d){var v=null!=(s=null==(l=u[t-1])?void 0:l.end)?s:0;d===o&&i===v||(t<F.current&&i<e&&$(e+d-o),j.current[t]=X(t,d),ie(e,r,n),I.current=!0),F.current=t,null==(f=M.current.get(c))||f.disconnect(),M.current.set(c,a)}else a.disconnect(),M.current.delete(c)})).observe(c)}})},h=i;h<=o;h+=1)v(h);d.length&&(i>(v=d[c(0,d.length-1,a,(function(e){return d[e]}))])&&(h=j.current[v].size,f.unshift({index:v,start:0,size:h,width:L.current.width,isScrolling:n||void 0,isSticky:!0,measureRef:function(){return null}}),E.current.style[Q]=l-h+"px",E.current.style[K]=u+h+"px")),z((function(e){return function(e,r,n){if(e.length!==r.length)return!0;for(var t=function(t){if(Object.keys(e[t]).some((function(u){return!n[u]&&e[t][u]!==r[t][u]})))return{v:!0}},u=0;u<e.length;u+=1){var c=t(u);if("object"==typeof c)return c.v}return!1}(e,f,{measureRef:!0})?f:e})),r&&(H.current&&H.current({overscanStartIndex:i,overscanStopIndex:o,visibleStartIndex:a,visibleStopIndex:s,scrollOffset:e,scrollForward:e>A.current,userScroll:q.current}),o=(i=Math.floor((s+1)/x))*x,!_.current||s===O.current||V.current&&V.current(i)||_.current({startIndex:o,stopIndex:o+x-1,loadIndex:i,scrollOffset:e,userScroll:q.current}),O.current=s,n&&ne(),q.current||ue())}else z([])}),[Z,X,t,x,_,Q,H,ne,ue,$,K]);return function(e,r,n){var t=a(r);l((function(){if(!e.current)return function(){return null};var r=new ResizeObserver((function(e){e=e[0].contentRect,t.current({width:e.width,height:e.height})}));return r.observe(e.current),function(){return r.disconnect()}}),[t,e].concat(n))}(T,(function(e){var r,n=L.current,t=n.height;t=(n=n.width===e.width)&&t===e.height;var u,c=null==(r=j.current[j.current.length-1])?void 0:r.end;(L.current=e,Y(I.current),ie(A.current),I.current||n)||(r=null==(u=j.current[j.current.length-1])?void 0:u.end,$(A.current*(r/c||1)));C.current&&!t&&J.current&&J.current(e),C.current=!0}),[t,ie,Y,J,$]),l((function(){var e=T.current;if(!e)return function(){return null};var r=function(e){if((e=e.target[U])!==A.current){var r=G.current;r="function"==typeof r?r(Math.abs(e-A.current)):r,ie(e,!0,r),A.current=e}};e.addEventListener("scroll",r,{passive:!0});var n=M.current;return function(){te(),ce(),N.current&&(cancelAnimationFrame(N.current),N.current=void 0),e.removeEventListener("scroll",r),n.forEach((function(e){return e.disconnect()})),n.clear()}}),[te,ce,ie,U,G]),{outerRef:T,innerRef:E,items:e,scrollTo:ee,scrollToItem:re}},Object.defineProperty(e,"__esModule",{value:!0})}));
+"use strict";!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((r="undefined"!=typeof globalThis?globalThis:r||self).ReactCoolVirtual={},r.React)}(this,(function(r,e){var t,n;(n=t||(t={})).auto="auto",n.start="start",n.center="center",n.end="end";var u=function(r,e,t,n){for(;r<=e;){var u=(r+e)/2|0,c=n(u);if(t<c)e=u-1;else{if(!(t>c))return u;r=u+1}}return 0<r?r-1:0},c=function(r){return"number"==typeof r&&!Number.isNaN(r)},i=function(){return"performance"in window?performance.now():Date.now()},o=function(r){var t=e.useRef(r);return t.current=r,t},a=function(r,t){var n=e.useRef(),u=o(r),c=e.useCallback((function(){n.current&&(cancelAnimationFrame(n.current),n.current=void 0)}),[]),a=e.useCallback((function(r){i()-r>=t?u.current():n.current=requestAnimationFrame((function(){return a(r)}))}),[u,t]);return[e.useCallback((function(){c(),a(i())}),[c,a]),c]},s="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;r.useVirtual=function(r){var n=r.itemCount,l=r.ssrItemCount,f=r.itemSize,d=void 0===f?50:f;f=r.horizontal;var v=r.overscanCount,h=void 0===v?1:v;v=r.useIsScrolling;var m=r.stickyIndices,g=r.scrollDuration;g=void 0===g?function(r){return Math.min(Math.max(.075*r,100),500)}:g;var p=r.scrollEasingFunction;p=void 0===p?function(r){return-(Math.cos(Math.PI*r)-1)/2}:p;var R=r.loadMoreCount,b=void 0===R?15:R;R=r.isItemLoaded;var x=r.loadMore,S=r.onScroll,w=r.onResize,y=e.useState((function(){return function(r,e){if(!e)return[];var t=c(e)?[0,e-1]:e;e=t[1];var n=[];for(t=t[0];t<=e;t+=1){var u;n[t]={index:t,start:0,width:0,size:c(r)?r:null!=(u=r(t,0))?u:50,measureRef:function(){return null}}}return n}(d,l)}));r=y[0];var z=y[1],M=e.useRef(!1),C=e.useRef(!1),I=e.useRef(!1),k=e.useRef(new Map),A=e.useRef(0),F=e.useRef(-1),O=e.useRef(),T=e.useRef(null),E=e.useRef(null),L=e.useRef({width:0,height:0}),j=e.useRef([]),q=e.useRef(!0),N=e.useRef(),D=e.useRef(m),P=o(g),V=o(p),_=e.useRef(R),B=o(x),G=o(d),H=o(v),J=o(S),K=o(w),Q=f?"width":"height",U=f?"marginLeft":"marginTop",W=f?"scrollLeft":"scrollTop",X=e.useCallback((function(r){var e,t=G.current;return c(t)?t:null!=(e=t(r,L.current.width))?e:50}),[G]),Y=e.useCallback((function(r,e){var t,n,u=null!=(t=null==(n=j.current[r-1])?void 0:n.end)?t:0;return{idx:r,start:u,end:u+e,size:e}}),[]),Z=e.useCallback((function(r){void 0===r&&(r=!0),j.current.length=n;for(var e=0;e<n;e+=1)j.current[e]=Y(e,r&&j.current[e]?j.current[e].size:X(e))}),[X,Y,n]),$=e.useCallback((function(r){var e=j.current,t=0;if(I.current)for(;t<e.length&&e[t].start<(null!=(n=null==(c=e[t+1])?void 0:c.start)?n:0)&&e[t].start+e[t].size<r;){var n,c;t+=1}else t=u(0,e.length-1,r,(function(r){return e[r].start}));for(c=e[n=t].start;n<e.length&&c<r+L.current[Q];)c+=e[n].size,n+=1;r=Math.max(t-h,0),c=Math.min(n+h,e.length)-1;var i=e[r].start;return{oStart:r,oStop:c,vStart:t,vStop:n-1,margin:i,innerSize:Math[c<e.length-1?"max":"min"](e[c].end+e[c].size,e[e.length-1].end)-i}}),[h,Q]),rr=e.useCallback((function(r){T.current&&(T.current[W]=r)}),[W]),er=e.useCallback((function(r,e){var t=A.current,n=(r=c(r)?{offset:r}:r).offset;if(r=r.smooth,c(n))if(q.current=!1,r){var u=i();N.current=requestAnimationFrame((function r(){var o=P.current;o=c(o)?o:o(Math.abs(n-t)),o=Math.min((i()-u)/o,1);var a=V.current(o);rr(a*(n-t)+t),1>o?N.current=requestAnimationFrame(r):e&&e()}))}else rr(n),e&&e()}),[P,V,rr]),tr=e.useCallback((function(r,e){var n=c(r)?{index:r}:r,u=n.index,i=n.align;if(i=void 0===i?t.auto:i,n=n.smooth,c(u)){C.current=!0,I.current&&Z();var o=j.current,a=o[Math.max(0,Math.min(u,o.length-1))];if(a){u=a.start;var s=a.end;a=a.size,o=o[o.length-1].end;var l=L.current[Q],f=A.current;o<=l?e&&e():(i===t.start||i===t.auto&&f>u?f=o-u<=l?o-l:u:i===t.end||i===t.auto&&f+l<s?f=u+a<=l?0:u-l+a:i===t.center&&u+a/2>l/2&&(f=o-(i=u-l/2+a/2)<=l?o-l:i),I.current&&1>=Math.abs(f-A.current)?e&&e():er({offset:f,smooth:n},(function(){I.current?setTimeout((function(){return tr(r,e)})):e&&e()})))}}}),[Z,er,Q]),nr=(f=a((function(){return or(A.current)}),150))[0],ur=f[1],cr=(f=a((function(){q.current=!0,C.current=!1}),150))[0],ir=f[1],or=e.useCallback((function(r,e,t){if(E.current)if(!B.current||M.current||_.current&&_.current(0)||B.current({startIndex:0,stopIndex:b-1,loadIndex:0,scrollOffset:r,userScroll:q.current}),n){var c=$(r),i=c.oStart,o=c.oStop,a=c.vStart,s=c.vStop,l=c.margin;c=c.innerSize,E.current.style[U]=l+"px",E.current.style[Q]=c+"px";for(var f=[],d=Array.isArray(D.current)?D.current:[],v=function(n){var u=j.current,c=u[n],i=c.start,o=c.size;f.push({index:n,start:i-l,size:o,width:L.current.width,isScrolling:t||void 0,isSticky:d.includes(n)||void 0,measureRef:function(c){c&&new ResizeObserver((function(c,a){var s,l,f,d=(c=c[0].target).getBoundingClientRect()[Q];if(d){var v=null!=(s=null==(l=u[n-1])?void 0:l.end)?s:0;d===o&&i===v||(n<F.current&&i<r&&rr(r+d-o),j.current[n]=Y(n,d),C.current||or(r,e,t),I.current=!0),F.current=n,null==(f=k.current.get(c))||f.disconnect(),k.current.set(c,a)}else a.disconnect(),k.current.delete(c)})).observe(c)}})},h=i;h<=o;h+=1)v(h);d.length&&(i>(v=d[u(0,d.length-1,a,(function(r){return d[r]}))])&&(h=j.current[v].size,f.unshift({index:v,start:0,size:h,width:L.current.width,isScrolling:t||void 0,isSticky:!0,measureRef:function(){return null}}),E.current.style[U]=l-h+"px",E.current.style[Q]=c+h+"px")),z((function(r){return function(r,e,t){if(r.length!==e.length)return!0;for(var n=function(n){if(Object.keys(r[n]).some((function(u){return!t[u]&&r[n][u]!==e[n][u]})))return{v:!0}},u=0;u<r.length;u+=1){var c=n(u);if("object"==typeof c)return c.v}return!1}(r,f,{measureRef:!0})?f:r})),e&&(c=q.current,J.current&&J.current({overscanStartIndex:i,overscanStopIndex:o,visibleStartIndex:a,visibleStopIndex:s,scrollOffset:r,scrollForward:r>A.current,userScroll:c}),o=(i=Math.floor((s+1)/b))*b,!B.current||s===O.current||_.current&&_.current(i)||B.current({startIndex:o,stopIndex:o+b-1,loadIndex:i,scrollOffset:r,userScroll:c}),O.current=s,t&&nr(),c||cr())}else z([])}),[$,Y,n,b,B,U,J,nr,cr,rr,Q]);return function(r,e,t){var n=o(e);s((function(){if(!r.current)return function(){return null};var e=new ResizeObserver((function(r){r=r[0].contentRect,n.current({width:r.width,height:r.height})}));return e.observe(r.current),function(){return e.disconnect()}}),[n,r].concat(t))}(T,(function(r){var e,t=L.current,n=t.height;n=(t=t.width===r.width)&&n===r.height;var u,c=null==(e=j.current[j.current.length-1])?void 0:e.end;(L.current=r,Z(I.current),or(A.current),I.current||t)||(e=null==(u=j.current[j.current.length-1])?void 0:u.end,rr(A.current*(e/c||1)));M.current&&!n&&K.current&&K.current(r),M.current=!0}),[n,or,Z,K,rr]),s((function(){var r=T.current;if(!r)return function(){return null};var e=function(r){if((r=r.target[W])!==A.current){var e=H.current;e="function"==typeof e?e(Math.abs(r-A.current)):e,or(r,!0,e),A.current=r}};r.addEventListener("scroll",e,{passive:!0});var t=k.current;return function(){ur(),ir(),N.current&&(cancelAnimationFrame(N.current),N.current=void 0),r.removeEventListener("scroll",e),t.forEach((function(r){return r.disconnect()})),t.clear()}}),[ur,ir,or,W,H]),{outerRef:T,innerRef:E,items:r,scrollTo:er,scrollToItem:tr}},Object.defineProperty(r,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.umd.production.min.js.map

package.json

 {
   "name": "react-cool-virtual",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "A tiny React hook for rendering large datasets like a breeze.",
@@ -90,11 +90,11 @@ "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.14.0"
+    "@babel/runtime": "^7.14.5"
   },
   "devDependencies": {
     "@ampproject/rollup-plugin-closure-compiler": "^0.26.0",
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-transform-runtime": "^7.14.3",
-    "@babel/preset-env": "^7.14.4",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
+    "@babel/core": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.14.5",
     "@changesets/changelog-github": "^0.4.0",
@@ -106,6 +106,6 @@ "@changesets/cli": "^2.16.0",
     "@rollup/plugin-replace": "^2.4.2",
-    "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react-hooks": "^7.0.0",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.9",
+    "@types/react": "^17.0.11",
     "bundlesize2": "^0.0.27",
@@ -124,3 +124,3 @@ "cpy-cli": "^3.1.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.51.0",
+    "rollup": "^2.51.2",
     "rollup-plugin-size-snapshot": "^0.12.0",
@@ -127,0 +127,0 @@ "rollup-plugin-terser": "^7.0.2",

README.md

@@ -36,3 +36,3 @@ <p align="center">
 
-When rendering a large set of data (e.g. list, table etc.) in React, we all face performance/memory troubles. There're [some great libraries](https://www.npmjs.com/search?q=react%20virtualized) already available but most of them are component-based solutions that provide well-defineded way of using but increase a lot of bundle size. However [a library](https://github.com/tannerlinsley/react-virtual) comes out as a hook-based solution that is flexible and `headless` but applying styles for using it can be verbose. Furthermore, it lacks many of the [useful features](#features).
+When rendering a large set of data (e.g. list, table, etc.) in React, we all face performance/memory troubles. There're [some great libraries](https://www.npmjs.com/search?q=react%20virtualized) already available but most of them are component-based solutions that provide well-defineded way of using but increase a lot of bundle size. However [a library](https://github.com/tannerlinsley/react-virtual) comes out as a hook-based solution that is flexible and `headless` but applying styles for using it can be verbose. Furthermore, it lacks many of the [useful features](#features).
 
@@ -242,3 +242,3 @@ React Cool Virtual is a [tiny](https://bundlephobia.com/result?p=react-cool-virtual) React hook that gives you a **better DX** and **modern way** for virtualizing a large amount of data without struggle 🤯.
 
-This example demonstrates how to create a real-time resize row (e.g. accordion, collapse etc.). For column or grid, please refer to CodeSandbox.
+This example demonstrates how to create a real-time resize row (e.g. accordion, collapse, etc.). For column or grid, please refer to CodeSandbox.
 
@@ -413,9 +413,11 @@ [![Edit RCV - Real-time Resize](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rcv-real-time-resize-fixvr?fontsize=14&hidenavigation=1&theme=dark)
 
-The default easing effect is [easeInOutCubic](https://easings.net/#easeInOutCubic), and the duration is 500 milliseconds. You can easily customize your own effect as follows:
+The default easing effect is [easeInOutSine](https://easings.net/#easeInOutSine), and the duration is `100ms <= distance * 0.075 <= 500ms`. You can easily customize your own effect as follows:
 
 ```js
 const { scrollTo } = useVirtual({
-  // For 500 milliseconds (default = 500ms)
+  // For 500 milliseconds
   scrollDuration: 500,
-  // Using "easeInOutBack" effect (default = easeInOutCubic), see: https://easings.net/#easeInOutBack
+  // Or whatever duration you want based on the scroll distance
+  scrollDuration: (distance) => distance * 0.05,
+  // Using "easeInOutBack" effect (default = easeInOutSine), see: https://easings.net/#easeInOutSine
   scrollEasingFunction: (t) => {
@@ -488,3 +490,3 @@ const c1 = 1.70158;
     <div
-      style={{ width: "300px", height: "300px", overflow: "auto" }}
+      style={{ width: "300px", height: "500px", overflow: "auto" }}
       ref={outerRef}
@@ -548,3 +550,3 @@ >
     <div
-      style={{ width: "300px", height: "300px", overflow: "auto" }}
+      style={{ width: "300px", height: "500px", overflow: "auto" }}
       ref={outerRef}
@@ -684,3 +686,3 @@ >
     itemCount: messages.length,
-    // Speed up smooth scrolling
+    // You can speed up smooth scrolling
     scrollDuration: 50,
@@ -839,3 +841,3 @@ onScroll: ({ userScroll }) => {
 
-React requires [keys](https://reactjs.org/docs/lists-and-keys.html#keys) for array items. I'd recommend using an unique id as the key as possible as we can, especially when working with reordering, filtering etc. Refer to [this article](https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318) to learn more.
+React requires [keys](https://reactjs.org/docs/lists-and-keys.html#keys) for array items. I'd recommend using an unique id as the key as possible as we can, especially when working with reordering, filtering, etc. Refer to [this article](https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318) to learn more.
 
@@ -873,3 +875,3 @@ ```js
     ssrItemCount: 30, // Renders 0th - 30th items on SSR
-    // or
+    // Or
     ssrItemCount: [50, 80], // Renders 50th - 80th items on SSR
@@ -963,5 +965,5 @@ });
 
-`number`
+`number | (distance: number) => number`
 
-The duration of [smooth scrolling](#smooth-scrolling), the unit is milliseconds (default = 500ms).
+The duration of [smooth scrolling](#smooth-scrolling), the unit is milliseconds (default = `100ms <= distance * 0.075 <= 500ms`).
 
@@ -972,3 +974,3 @@ #### scrollEasingFunction
 
-A function that allows us to customize the easing effect of [smooth scrolling](#smooth-scrolling) (default = [easeInOutCubic](https://easings.net/#easeInOutCubic)).
+A function that allows us to customize the easing effect of [smooth scrolling](#smooth-scrolling) (default = [easeInOutSine](https://easings.net/#easeInOutSine)).
 
@@ -1189,3 +1191,3 @@ #### loadMoreCount
     useIsScrolling: true, // Just use it (default = false)
-    // or
+    // Or
     useIsScrolling: (speed) => speed > 50, // Use it based on the scroll speed (more user friendly)
@@ -1192,0 +1194,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

339607

increased by1.91%

Number of lines in readme file

1360

increased by0.15%

Worsened metrics

Lines of code

1700

decreased by-0.53%

Dependency changes

• Updated@babel/runtime@^7.14.5