react-cool-virtual - npm Package Compare versions

Comparing version 0.0.17 to 0.0.18

CHANGELOG.md

 # react-cool-virtual
 
+## 0.0.18
+
+### Patch Changes
+
+- [#63](https://github.com/wellyshen/react-cool-virtual/pull/63) [`01ca818`](https://github.com/wellyshen/react-cool-virtual/commit/01ca81813d0a664254e12e14814daab244615a88) Thanks [@wellyshen](https://github.com/wellyshen)! - fix: `scrollToItem` method not working with dynamic size
+
 ## 0.0.17
@@ -4,0 +10,0 @@

dist/index.cjs.development.js

@@ -127,4 +127,4 @@ 'use strict';
 var DEFAULT_ITEM_SIZE = 50;
-var DEBOUNCE_INTERVAL = 200;
-var AUTO_CORRECT_LIMIT = 10;
+var DEBOUNCE_INTERVAL = 150;
+var MAX_CORRECT_SCROLL_COUNT = 10;
 
@@ -186,3 +186,4 @@ var getInitItems = function getInitItems(ssrItemCount, keyExtractor) {
   var hasLoadMoreOnMountRef = react.useRef(false);
-  var autoCorrectTimesRef = react.useRef(0);
+  var isScrollToItemRef = react.useRef(false);
+  var correctScrollCountRef = react.useRef(0);
   var rosRef = react.useRef(new Map());
@@ -236,3 +237,3 @@ var scrollOffsetRef = react.useRef(0);
 
-    if (hasDynamicSizeRef.current) {
+    if (hasDynamicSizeRef.current && !isScrollToItemRef.current) {
       while (vStart < msData.length && msData[vStart].start < (((_msData = msData[vStart + 1]) == null ? void 0 : _msData.start) || 0) && msData[vStart].start < scrollOffset) {
@@ -279,2 +280,3 @@ var _msData;
   var _useDebounce2 = useDebounce(function () {
+    isScrollToItemRef.current = false;
     userScrollRef.current = true;
@@ -436,6 +438,9 @@ var len = rosRef.current.size - msDataRef.current.length;
         align = _ref5$align === void 0 ? Align.auto : _ref5$align,
-        smooth = _ref5.smooth,
-        autoCorrect = _ref5.autoCorrect;
+        smooth = _ref5.smooth;
 
     if (!isNumber(index)) return;
+    isScrollToItemRef.current = true;
+    if (hasDynamicSizeRef.current) for (var i = 0; i < msDataRef.current.length; i += 1) {
+      msDataRef.current[i] = getMeasure(i, msDataRef.current[i].size);
+    }
     var ms = msDataRef.current[Math.max(0, Math.min(index, itemCount - 1))];
@@ -448,8 +453,3 @@ if (!ms) return;
     var outerSize = outerRectRef.current[sizeKey];
-
-    if (autoCorrect && scrollOffset <= start && scrollOffset + outerSize >= end && cb) {
-      cb();
-      return;
-    }
-
+    if (hasDynamicSizeRef.current && scrollOffset <= start && scrollOffset + outerSize >= end && cb) cb();
     var endPos = start - outerSize + size;
@@ -483,15 +483,15 @@
     }, function () {
-      if (!autoCorrect) {
+      if (!hasDynamicSizeRef.current) {
         if (cb) cb();
-      } else if (autoCorrectTimesRef.current <= AUTO_CORRECT_LIMIT && (scrollOffset >= start || scrollOffset + outerSize <= end)) {
+      } else if (correctScrollCountRef.current <= MAX_CORRECT_SCROLL_COUNT && (scrollOffset >= start || scrollOffset + outerSize <= end)) {
         setTimeout(function () {
           return scrollToItem(val, cb);
         });
-        autoCorrectTimesRef.current += 1;
+        correctScrollCountRef.current += 1;
       } else {
         if (cb) cb();
-        autoCorrectTimesRef.current = 0;
+        correctScrollCountRef.current = 0;
       }
     });
-  }, [itemCount, scrollTo, sizeKey]);
+  }, [getMeasure, itemCount, scrollTo, sizeKey]);
   useResizeEffect(outerRef, function (rect) {
@@ -498,0 +498,0 @@ var isSameWidth = outerRectRef.current.width === rect.width;

dist/index.cjs.production.min.js

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

dist/index.d.ts

@@ -95,3 +95,2 @@ declare module "react-cool-virtual" {
     smooth?: boolean;
-    autoCorrect?: boolean;
   }
@@ -98,0 +97,0 @@

dist/index.esm.js

@@ -123,4 +123,4 @@ import { useRef, useCallback, useLayoutEffect, useEffect, useState } from 'react';
 var DEFAULT_ITEM_SIZE = 50;
-var DEBOUNCE_INTERVAL = 200;
-var AUTO_CORRECT_LIMIT = 10;
+var DEBOUNCE_INTERVAL = 150;
+var MAX_CORRECT_SCROLL_COUNT = 10;
 
@@ -182,3 +182,4 @@ var getInitItems = function getInitItems(ssrItemCount, keyExtractor) {
   var hasLoadMoreOnMountRef = useRef(false);
-  var autoCorrectTimesRef = useRef(0);
+  var isScrollToItemRef = useRef(false);
+  var correctScrollCountRef = useRef(0);
   var rosRef = useRef(new Map());
@@ -232,3 +233,3 @@ var scrollOffsetRef = useRef(0);
 
-    if (hasDynamicSizeRef.current) {
+    if (hasDynamicSizeRef.current && !isScrollToItemRef.current) {
       while (vStart < msData.length && msData[vStart].start < (((_msData = msData[vStart + 1]) == null ? void 0 : _msData.start) || 0) && msData[vStart].start < scrollOffset) {
@@ -275,2 +276,3 @@ var _msData;
   var _useDebounce2 = useDebounce(function () {
+    isScrollToItemRef.current = false;
     userScrollRef.current = true;
@@ -432,6 +434,9 @@ var len = rosRef.current.size - msDataRef.current.length;
         align = _ref5$align === void 0 ? Align.auto : _ref5$align,
-        smooth = _ref5.smooth,
-        autoCorrect = _ref5.autoCorrect;
+        smooth = _ref5.smooth;
 
     if (!isNumber(index)) return;
+    isScrollToItemRef.current = true;
+    if (hasDynamicSizeRef.current) for (var i = 0; i < msDataRef.current.length; i += 1) {
+      msDataRef.current[i] = getMeasure(i, msDataRef.current[i].size);
+    }
     var ms = msDataRef.current[Math.max(0, Math.min(index, itemCount - 1))];
@@ -444,8 +449,3 @@ if (!ms) return;
     var outerSize = outerRectRef.current[sizeKey];
-
-    if (autoCorrect && scrollOffset <= start && scrollOffset + outerSize >= end && cb) {
-      cb();
-      return;
-    }
-
+    if (hasDynamicSizeRef.current && scrollOffset <= start && scrollOffset + outerSize >= end && cb) cb();
     var endPos = start - outerSize + size;
@@ -479,15 +479,15 @@
     }, function () {
-      if (!autoCorrect) {
+      if (!hasDynamicSizeRef.current) {
         if (cb) cb();
-      } else if (autoCorrectTimesRef.current <= AUTO_CORRECT_LIMIT && (scrollOffset >= start || scrollOffset + outerSize <= end)) {
+      } else if (correctScrollCountRef.current <= MAX_CORRECT_SCROLL_COUNT && (scrollOffset >= start || scrollOffset + outerSize <= end)) {
         setTimeout(function () {
           return scrollToItem(val, cb);
         });
-        autoCorrectTimesRef.current += 1;
+        correctScrollCountRef.current += 1;
       } else {
         if (cb) cb();
-        autoCorrectTimesRef.current = 0;
+        correctScrollCountRef.current = 0;
       }
     });
-  }, [itemCount, scrollTo, sizeKey]);
+  }, [getMeasure, itemCount, scrollTo, sizeKey]);
   useResizeEffect(outerRef, function (rect) {
@@ -494,0 +494,0 @@ var isSameWidth = outerRectRef.current.width === rect.width;

dist/index.umd.development.js

@@ -127,4 +127,4 @@ (function (global, factory) {
   var DEFAULT_ITEM_SIZE = 50;
-  var DEBOUNCE_INTERVAL = 200;
-  var AUTO_CORRECT_LIMIT = 10;
+  var DEBOUNCE_INTERVAL = 150;
+  var MAX_CORRECT_SCROLL_COUNT = 10;
 
@@ -186,3 +186,4 @@ var getInitItems = function getInitItems(ssrItemCount, keyExtractor) {
     var hasLoadMoreOnMountRef = react.useRef(false);
-    var autoCorrectTimesRef = react.useRef(0);
+    var isScrollToItemRef = react.useRef(false);
+    var correctScrollCountRef = react.useRef(0);
     var rosRef = react.useRef(new Map());
@@ -236,3 +237,3 @@ var scrollOffsetRef = react.useRef(0);
 
-      if (hasDynamicSizeRef.current) {
+      if (hasDynamicSizeRef.current && !isScrollToItemRef.current) {
         while (vStart < msData.length && msData[vStart].start < (((_msData = msData[vStart + 1]) == null ? void 0 : _msData.start) || 0) && msData[vStart].start < scrollOffset) {
@@ -279,2 +280,3 @@ var _msData;
     var _useDebounce2 = useDebounce(function () {
+      isScrollToItemRef.current = false;
       userScrollRef.current = true;
@@ -436,6 +438,9 @@ var len = rosRef.current.size - msDataRef.current.length;
           align = _ref5$align === void 0 ? Align.auto : _ref5$align,
-          smooth = _ref5.smooth,
-          autoCorrect = _ref5.autoCorrect;
+          smooth = _ref5.smooth;
 
       if (!isNumber(index)) return;
+      isScrollToItemRef.current = true;
+      if (hasDynamicSizeRef.current) for (var i = 0; i < msDataRef.current.length; i += 1) {
+        msDataRef.current[i] = getMeasure(i, msDataRef.current[i].size);
+      }
       var ms = msDataRef.current[Math.max(0, Math.min(index, itemCount - 1))];
@@ -448,8 +453,3 @@ if (!ms) return;
       var outerSize = outerRectRef.current[sizeKey];
-
-      if (autoCorrect && scrollOffset <= start && scrollOffset + outerSize >= end && cb) {
-        cb();
-        return;
-      }
-
+      if (hasDynamicSizeRef.current && scrollOffset <= start && scrollOffset + outerSize >= end && cb) cb();
       var endPos = start - outerSize + size;
@@ -483,15 +483,15 @@
       }, function () {
-        if (!autoCorrect) {
+        if (!hasDynamicSizeRef.current) {
           if (cb) cb();
-        } else if (autoCorrectTimesRef.current <= AUTO_CORRECT_LIMIT && (scrollOffset >= start || scrollOffset + outerSize <= end)) {
+        } else if (correctScrollCountRef.current <= MAX_CORRECT_SCROLL_COUNT && (scrollOffset >= start || scrollOffset + outerSize <= end)) {
           setTimeout(function () {
             return scrollToItem(val, cb);
           });
-          autoCorrectTimesRef.current += 1;
+          correctScrollCountRef.current += 1;
         } else {
           if (cb) cb();
-          autoCorrectTimesRef.current = 0;
+          correctScrollCountRef.current = 0;
         }
       });
-    }, [itemCount, scrollTo, sizeKey]);
+    }, [getMeasure, itemCount, scrollTo, sizeKey]);
     useResizeEffect(outerRef, function (rect) {
@@ -498,0 +498,0 @@ var isSameWidth = outerRectRef.current.width === rect.width;

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

package.json

 {
   "name": "react-cool-virtual",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "A tiny React hook for rendering large datasets like a breeze.",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -268,8 +268,28 @@ <h4 align="center"><code><strong>🚧 Work in progress, don't use it now.</strong></code></h4>
 
-Coming soon...
+You can imperatively scroll to offset or items as follows:
 
-### Infinite Scroll
+[![Edit RCV - Scroll-to Controls](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rcv-scroll-to-controls-v5b3i?fontsize=14&hidenavigation=1&theme=dark)
 
-Coming soon...
+```js
+const { scrollTo, scrollToItem } = useVirtual();
 
+const scrollToOffset = () => {
+  // Scroll to 500px
+  scrollTo(500, () => {
+    // 🤙🏼 Do whatever you want through the callback
+  });
+};
+
+const scrollToItem = () => {
+  // Scroll to the 500th item
+  scrollToItem(500, () => {
+    // 🤙🏼 Do whatever you want through the callback
+  });
+
+  // Control the alignment of the item with the `align` option
+  // Available values: "auto" (default) | "start" | "center" | "end"
+  scrollToItem({ index: 500, align: "center" });
+};
+```
+
 ### Smooth Scrolling
@@ -279,2 +299,6 @@
 
+### Infinite Scroll
+
+Coming soon...
+
 ### Server-side Rendering (SSR)
@@ -281,0 +305,0 @@

No alert changes

Improved metrics

Total package byte prevSize

271961

increased by2.04%

Lines of code

1599

increased by0.31%

Number of lines in readme file

415

increased by6.14%

No dependency changes