react-cool-virtual - npm Package Compare versions

Comparing version 0.0.23 to 0.0.24

CHANGELOG.md

 # react-cool-virtual
 
+## 0.0.24
+
+### Patch Changes
+
+- [#86](https://github.com/wellyshen/react-cool-virtual/pull/86) [`3c55e86`](https://github.com/wellyshen/react-cool-virtual/commit/3c55e864595784b14b21df924bfd0621f068d08b) Thanks [@wellyshen](https://github.com/wellyshen)! - refactor: rename `loadMoreThreshold` option to `loadMoreCount`
+
 ## 0.0.23
@@ -4,0 +10,0 @@

dist/index.cjs.development.js

@@ -167,4 +167,4 @@ 'use strict';
       scrollEasingFunction = _ref2$scrollEasingFun === void 0 ? easeInOutCubic : _ref2$scrollEasingFun,
-      _ref2$loadMoreThresho = _ref2.loadMoreThreshold,
-      loadMoreThreshold = _ref2$loadMoreThresho === void 0 ? 15 : _ref2$loadMoreThresho,
+      _ref2$loadMoreCount = _ref2.loadMoreCount,
+      loadMoreCount = _ref2$loadMoreCount === void 0 ? 15 : _ref2$loadMoreCount,
       isItemLoaded = _ref2.isItemLoaded,
@@ -392,3 +392,3 @@ loadMore = _ref2.loadMore,
       startIndex: 0,
-      stopIndex: loadMoreThreshold - 1,
+      stopIndex: loadMoreCount - 1,
       loadIndex: 0,
@@ -480,7 +480,7 @@ scrollOffset: scrollOffset,
     });
-    var loadIndex = Math.floor((vStop + 1) / loadMoreThreshold);
-    var startIndex = loadIndex * loadMoreThreshold;
+    var loadIndex = Math.floor((vStop + 1) / loadMoreCount);
+    var startIndex = loadIndex * loadMoreCount;
     if (loadMoreRef.current && vStop !== prevVStopRef.current && !(isItemLoadedRef.current && isItemLoadedRef.current(loadIndex))) loadMoreRef.current({
       startIndex: startIndex,
-      stopIndex: startIndex + loadMoreThreshold - 1,
+      stopIndex: startIndex + loadMoreCount - 1,
       loadIndex: loadIndex,
@@ -493,3 +493,3 @@ scrollOffset: scrollOffset,
     resetOthers();
-  }, [getCalcData, getMeasure, itemCount, loadMoreRef, loadMoreThreshold, marginKey, onScrollRef, resetIsScrolling, resetOthers, scrollTo, sizeKey]);
+  }, [getCalcData, getMeasure, itemCount, loadMoreCount, loadMoreRef, marginKey, onScrollRef, resetIsScrolling, resetOthers, scrollTo, sizeKey]);
   useResizeEffect(outerRef, function (rect) {
@@ -496,0 +496,0 @@ var _msDataRef$current2, _msDataRef$current3;

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

dist/index.d.ts

@@ -106,3 +106,3 @@ declare module "react-cool-virtual" {
     scrollEasingFunction?: ScrollEasingFunction;
-    loadMoreThreshold?: number;
+    loadMoreCount?: number;
     isItemLoaded?: IsItemLoaded;
@@ -109,0 +109,0 @@ loadMore?: LoadMore;

dist/index.esm.js

@@ -163,4 +163,4 @@ import { useRef, useCallback, useLayoutEffect, useEffect, useState } from 'react';
       scrollEasingFunction = _ref2$scrollEasingFun === void 0 ? easeInOutCubic : _ref2$scrollEasingFun,
-      _ref2$loadMoreThresho = _ref2.loadMoreThreshold,
-      loadMoreThreshold = _ref2$loadMoreThresho === void 0 ? 15 : _ref2$loadMoreThresho,
+      _ref2$loadMoreCount = _ref2.loadMoreCount,
+      loadMoreCount = _ref2$loadMoreCount === void 0 ? 15 : _ref2$loadMoreCount,
       isItemLoaded = _ref2.isItemLoaded,
@@ -388,3 +388,3 @@ loadMore = _ref2.loadMore,
       startIndex: 0,
-      stopIndex: loadMoreThreshold - 1,
+      stopIndex: loadMoreCount - 1,
       loadIndex: 0,
@@ -476,7 +476,7 @@ scrollOffset: scrollOffset,
     });
-    var loadIndex = Math.floor((vStop + 1) / loadMoreThreshold);
-    var startIndex = loadIndex * loadMoreThreshold;
+    var loadIndex = Math.floor((vStop + 1) / loadMoreCount);
+    var startIndex = loadIndex * loadMoreCount;
     if (loadMoreRef.current && vStop !== prevVStopRef.current && !(isItemLoadedRef.current && isItemLoadedRef.current(loadIndex))) loadMoreRef.current({
       startIndex: startIndex,
-      stopIndex: startIndex + loadMoreThreshold - 1,
+      stopIndex: startIndex + loadMoreCount - 1,
       loadIndex: loadIndex,
@@ -489,3 +489,3 @@ scrollOffset: scrollOffset,
     resetOthers();
-  }, [getCalcData, getMeasure, itemCount, loadMoreRef, loadMoreThreshold, marginKey, onScrollRef, resetIsScrolling, resetOthers, scrollTo, sizeKey]);
+  }, [getCalcData, getMeasure, itemCount, loadMoreCount, loadMoreRef, marginKey, onScrollRef, resetIsScrolling, resetOthers, scrollTo, sizeKey]);
   useResizeEffect(outerRef, function (rect) {
@@ -492,0 +492,0 @@ var _msDataRef$current2, _msDataRef$current3;

dist/index.umd.development.js

@@ -167,4 +167,4 @@ (function (global, factory) {
         scrollEasingFunction = _ref2$scrollEasingFun === void 0 ? easeInOutCubic : _ref2$scrollEasingFun,
-        _ref2$loadMoreThresho = _ref2.loadMoreThreshold,
-        loadMoreThreshold = _ref2$loadMoreThresho === void 0 ? 15 : _ref2$loadMoreThresho,
+        _ref2$loadMoreCount = _ref2.loadMoreCount,
+        loadMoreCount = _ref2$loadMoreCount === void 0 ? 15 : _ref2$loadMoreCount,
         isItemLoaded = _ref2.isItemLoaded,
@@ -392,3 +392,3 @@ loadMore = _ref2.loadMore,
         startIndex: 0,
-        stopIndex: loadMoreThreshold - 1,
+        stopIndex: loadMoreCount - 1,
         loadIndex: 0,
@@ -480,7 +480,7 @@ scrollOffset: scrollOffset,
       });
-      var loadIndex = Math.floor((vStop + 1) / loadMoreThreshold);
-      var startIndex = loadIndex * loadMoreThreshold;
+      var loadIndex = Math.floor((vStop + 1) / loadMoreCount);
+      var startIndex = loadIndex * loadMoreCount;
       if (loadMoreRef.current && vStop !== prevVStopRef.current && !(isItemLoadedRef.current && isItemLoadedRef.current(loadIndex))) loadMoreRef.current({
         startIndex: startIndex,
-        stopIndex: startIndex + loadMoreThreshold - 1,
+        stopIndex: startIndex + loadMoreCount - 1,
         loadIndex: loadIndex,
@@ -493,3 +493,3 @@ scrollOffset: scrollOffset,
       resetOthers();
-    }, [getCalcData, getMeasure, itemCount, loadMoreRef, loadMoreThreshold, marginKey, onScrollRef, resetIsScrolling, resetOthers, scrollTo, sizeKey]);
+    }, [getCalcData, getMeasure, itemCount, loadMoreCount, loadMoreRef, marginKey, onScrollRef, resetIsScrolling, resetOthers, scrollTo, sizeKey]);
     useResizeEffect(outerRef, function (rect) {
@@ -496,0 +496,0 @@ var _msDataRef$current2, _msDataRef$current3;

dist/index.umd.production.min.js

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

package.json

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

README.md

@@ -1,2 +0,2 @@
-<h4 align="center"><code><strong>🚧 Work in progress, most APIs are done. Not production ready yet, but you can try it!</strong></code></h4>
+<h4 align="center"><code><strong>🚧 Work in progress, most APIs are done. Not production ready yet but soon!</strong></code></h4>
 
@@ -33,9 +33,9 @@ <h1 align="center">
 - 🚚 Built-ins [load more callback](#infinite-scroll) for you to deal with infinite scroll + [skeleton screens](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a).
-- 🖱 Imperative [scroll-to controls](#scroll-to-offsetitems) for offset, items, and alignment.
+- 🖱 Imperative [scroll-to methods](#scroll-to-offsetitems) for offset, items, and alignment.
 - 🛹 Out of the box [smooth scrolling](#smooth-scrolling) and the effect is DIY-able.
-- ⛳ Provides `isScrolling` indicator to you for [performance optimization](#use-isscrolling-indicator) or other purposes.
+- ⛳ Provides `isScrolling` indicator to you for UI placeholders or [performance optimization](#use-isscrolling-indicator).
 - 🗄️ Supports [server-side rendering (SSR)](#server-side-rendering-ssr) for a fast [FP + FCP](https://developers.google.com/web/updates/2019/02/rendering-on-the-web#server-rendering) and better [SEO](https://developers.google.com/web/updates/2019/02/rendering-on-the-web#server-rendering).
 - 📜 Supports [TypeScript](#working-in-typescript) type definition.
 - 🎛 Super flexible [API](#api) design, built with DX in mind.
-- 🦔 Tiny size ([~ 2.7kB gzipped](https://bundlephobia.com/result?p=react-cool-virtual)). No external dependencies, aside for the `react`.
+- 🦔 Tiny size ([~ 2.8kB gzipped](https://bundlephobia.com/result?p=react-cool-virtual)). No external dependencies, aside for the `react`.
 
@@ -56,3 +56,3 @@ ## Why?
 - [Performance Optimization](#performance-optimization)
-- [Working in TypeScript](#working-in-typescript)
+- [TypeScript](#working-in-typescript)
 - [Sharing A `ref`](#how-to-share-a-ref)
@@ -418,7 +418,9 @@ - [Polyfill](#resizeobserver-polyfill)
     itemSize: 122,
-    // Starts to pre-fetch data when the user scrolls within every 5 items, e.g. 1 - 5, 6 - 10 and so on (default = 15)
-    loadMoreThreshold: BATCH_COMMENTS,
-    // Provide the loaded state for a batch items to tell the hook whether the `loadMore` should be triggered or not
+    // The number of items that you want to load/or pre-load, it will trigger the `loadMore` callback
+    // when the user scrolls within every items, e.g. 1 - 5, 6 - 10, and so on (default = 15)
+    loadMoreCount: BATCH_COMMENTS,
+    // Provide the loaded state of a batch items to the callback for telling the hook
+    // whether the `loadMore` should be triggered or not
     isItemLoaded: (loadIndex) => isItemLoadedArr[loadIndex],
-    // The callback will be invoked when more data needs to be loaded
+    // We can fetch the data through the callback, it's invoked when more items need to be loaded
     loadMore: (e) => loadData(e, setComments),
@@ -457,3 +459,5 @@ });
 const BATCH_COMMENTS = 5;
-const isItemLoadedArr = [];
+// We only have 50 (500 / 5) batches of items, so set the 51th (index = 50) batch as `true`
+// to avoid the `loadMore` callback from being invoked, yep it's a trick 😉
+isItemLoadedArr[50] = true;
 
@@ -479,3 +483,3 @@ const loadData = async ({ loadIndex }, setComments) => {
     itemCount: comments.length, // Provide the number of comments
-    loadMoreThreshold: BATCH_COMMENTS,
+    loadMoreCount: BATCH_COMMENTS,
     isItemLoaded: (loadIndex) => isItemLoadedArr[loadIndex],
@@ -493,4 +497,4 @@ loadMore: (e) => loadData(e, setComments),
           items.map(({ index, measureRef }) => {
-            const len = comments.length;
-            const showLoading = index === len - 1 && len < TOTAL_COMMENTS;
+            const showLoading =
+              index === comments.length - 1 && comments.length < TOTAL_COMMENTS;
 
@@ -708,4 +712,161 @@ return (
 
+React Cool Virtual is a custom React [hook](https://reactjs.org/docs/hooks-custom.html#using-a-custom-hook) that supplies you with [all the features](#features) for building highly performant virtualized datasets easily 🚀. It takes `options` parameters and returns useful methods as follows.
+
+```js
+const props = useVirtual(options);
+```
+
+## Options
+
+An `object` with the following options:
+
+### itemCount (Required)
+
+`number`
+
+The total number of items. It can be an arbitrary number if actual number is unknown, see the [example](#working-with-a-loading-indicator) to learn more.
+
+### ssrItemCount
+
+`number | [number, number]`
+
+The number of items that are rendered on server-side, see the [example](#server-side-rendering-ssr) to learn more.
+
+### itemSize
+
+`number | (index: number, width: number) => number`
+
+The size of an item (default = 50). When working with **dynamic size**, it will be the default/or estimated size of the unmeasured items.
+
+- For `number` use case, please refer to the [fixed size](#fixed-size).
+- For `index` callback use case, please refer to the [variable size](#variable-size).
+- For `width` callback use case, please refer to the [RWD](#responsive-web-design-rwd).
+
+### horizontal
+
+`boolean`
+
+The layout/orientation of the list (default = false). When `true` means left/right scrolling, so the hook will use `width` as the [item size](#itemsize) and use the `left` as the [start](#TBC) offset.
+
+### overscanCount
+
+`number`
+
+The number of items to render behind and ahead of the visible area (default = 1). That can be used for two reasons:
+
+- To slightly reduce/prevent a flash of empty screen while the user is scrolling. Please note, too many can negatively impact performance.
+- To allow the tab key to focus on the next (invisible) item for better accessibility.
+
+### useIsScrolling
+
+`boolean`
+
+To enable/disable the [isScrolling](#TBC) indicator of an item (default = false). It's useful for UI placeholders or [performance optimization](#use-isscrolling-indicator) when the list is being scrolled. Please note, using it will result in an additional render after scrolling has stopped.
+
+### scrollDuration
+
+`number`
+
+The duration of [smooth scrolling](#smooth-scrolling), the unit is milliseconds (default = 500ms).
+
+### scrollEasingFunction
+
+`(time: number) => number`
+
+A function that allows us to customize the easing effect of [smooth scrolling](#smooth-scrolling) (default = [easeInOutCubic](https://easings.net/#easeInOutCubic)).
+
+### loadMoreCount
+
+`number`
+
+How many number of items that you want to load/or pre-load (default = 15), it's used for [infinite scroll](#infinite-scroll). A number 15 means the [loadMore](#loadmore) callback will be invoked when the user scrolls within every 15 items, e.g. 1 - 15, 16 - 30, and so on.
+
+### isItemLoaded
+
+`(index: number) => boolean`
+
+A callback for us to provide the loaded state of a batch items, it's used for [infinite scroll](#infinite-scroll). It tells the hook whether the [loadMore](#loadmore) should be triggered or not.
+
+### loadMore
+
+`(event: Object) => void`
+
+A callback for us to fetch (more) data, it's used for [infinite scroll](#infinite-scroll). It's invoked when more items need to be loaded, which based on the mechanism of [loadMoreCount](#loadmorecount) and [isItemLoaded](#isitemloaded).
+
+```js
+const props = useVirtual({
+  onScroll: ({
+    startIndex, // (number) The start index of the batch item
+    stopIndex, // (number) The stop index of the batch item
+    loadIndex, // (number) The index of a batch items (e.g. 1 - 15 as 0, 16 - 30 as 1, and so on)
+    scrollOffset, // (number) The scroll offset from top/left, depends on the `horizontal` option
+    userScroll, // (boolean) Tells you the scrolling is through the user or not
+  }) => {
+    // Fetch data...
+  },
+});
+```
+
+### onScroll
+
+`(event: Object) => void`
+
+This event will be triggered when scroll position is being changed by the user scrolls or [scrollTo](#scrollto)/[scrollToItem](#scrolltoitem) methods.
+
+```js
+const props = useVirtual({
+  onScroll: ({
+    overscanStartIndex, // (number) The start index of the overscan item
+    overscanStopIndex, // (number) The stop index of the overscan item
+    visibleStartIndex, // (number) The start index of the visible item
+    visibleStopIndex, // (number) The stop index of the visible item
+    scrollOffset, // (number) The scroll offset from top/left, depends on the `horizontal` option
+    scrollForward, // (boolean) The scroll direction of up/down or left/right, depends on the `horizontal` option
+    userScroll, // (boolean) Tells you the scrolling is through the user or not
+  }) => {
+    // Do something...
+  },
+});
+```
+
+### onResize
+
+`(event: Object) => void`
+
+This event will be triggered when the size of the outer container element changes.
+
+## Props
+
+An `object` with the following properties:
+
+### outerRef
+
+`React.useRef<HTMLElement>`
+
+A `ref` to attach to the outer container element.
+
+### innerRef
+
+`React.useRef<HTMLElement>`
+
+A `ref` to attach to the inner container element.
+
+### items
+
+`Object[]`
+
 Coming soon...
 
+### scrollTo
+
+`(offsetOrOptions: number | Object, callback?: () => void) => void`
+
+Coming soon...
+
+### scrollToItem
+
+`(indexOrOptions: number | Object, callback?: () => void) => void`
+
+Coming soon...
+
 ## ResizeObserver Polyfill
@@ -712,0 +873,0 @@

No alert changes

Improved metrics

Total package byte prevSize

292468

increased by1.93%

Number of lines in readme file

922

increased by21.16%

No dependency changes