feat(useVirtual): add resetScroll option for filtering/sorting

.changeset/dry-dryers-burn.md

@@ -0,0 +1,5 @@
+---
+"react-cool-virtual": minor
+---
+
+feat(useVirtual): add `resetScroll` option for filtering/sorting

README.md

@@ -933,6 +933,12 @@ The size of an item (default = 50). When working with **dynamic size**, it will
 
 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](#items) position.
 
+#### resetScroll
+
+`boolean`
+
+It's used to tell the hook to reset the scroll position when the [itemCount](#itemcount-required) is changed (default = false). It's useful for filtering/sorting.
+
 #### overscanCount
 
 `number`

bundlesize.config.json

@@ -2,7 +2,7 @@
   "files": [
     {
       "path": "dist/index.umd.production.min.js",
-      "maxSize": "3 kB"
+      "maxSize": "3.5 kB"
     }
   ]
 }

src/types/index.ts

@@ -97,6 +97,7 @@ export interface Options {
   ssrItemCount?: SsrItemCount;
   itemSize?: ItemSize;
   horizontal?: boolean;
+  resetScroll?: boolean;
   overscanCount?: number;
   useIsScrolling?: UseIsScrolling;
   stickyIndices?: number[];

src/types/react-cool-virtual.d.ts

@@ -100,6 +100,7 @@ declare module "react-cool-virtual" {
     ssrItemCount?: number | [number, number];
     itemSize?: ItemSize;
     horizontal?: boolean;
+    resetScroll?: boolean;
     overscanCount?: number;
     useIsScrolling?: UseIsScrolling;
     stickyIndices?: number[];

src/useVirtual.ts

@@ -52,6 +52,7 @@ export default <
   ssrItemCount,
   itemSize = 50,
   horizontal,
+  resetScroll,
   overscanCount = 1,
   useIsScrolling,
   stickyIndices,
@@ -472,13 +473,15 @@ export default <
       const { width, height } = outerRectRef.current;
       const isSameWidth = width === rect.width;
       const isSameSize = isSameWidth && height === rect.height;
-      const prevTotalSize =
-        msDataRef.current[msDataRef.current.length - 1]?.end;
+      const prevItemCount = msDataRef.current.length;
+      const prevTotalSize = msDataRef.current[prevItemCount - 1]?.end;
 
       outerRectRef.current = rect;
       measureItems(hasDynamicSizeRef.current);
       handleScroll(scrollOffsetRef.current);
 
+      if (resetScroll && itemCount !== prevItemCount) scrollTo(0);
+
       if (!hasDynamicSizeRef.current && !isSameWidth) {
         const totalSize = msDataRef.current[msDataRef.current.length - 1]?.end;
         const ratio = totalSize / prevTotalSize || 1;
@@ -491,7 +494,7 @@ export default <
 
       isMountedRef.current = true;
     },
-    [itemCount, handleScroll, measureItems, onResizeRef, scrollTo]
+    [itemCount, resetScroll, handleScroll, measureItems, onResizeRef, scrollTo]
   );
 
   useIsoLayoutEffect(() => {