feat: increaseViewportBy for VirtuosoGrid

src/VirtuosoGrid.tsx

@@ -275,6 +275,7 @@ const {
       logLevel: 'logLevel',
       restoreStateFrom: 'restoreStateFrom',
       initialTopMostItemIndex: 'initialTopMostItemIndex',
+      increaseViewportBy: 'increaseViewportBy',
     },
     methods: {
       scrollTo: 'scrollTo',

src/component-interfaces/VirtuosoGrid.ts

@@ -61,10 +61,22 @@ export interface VirtuosoGridProps<D, C = unknown> extends GridRootProps {
   /**
    * Set the overscan property to make the component "chunk" the rendering of new items on scroll.
    * The property causes the component to render more items than the necessary, but reduces the re-renders on scroll.
-   * Setting `{ main: number, reverse: number }` lets you extend the list in both the main and the reverse scrollable directions.
+   * Setting `{ main: number, reverse: number }` lets you extend the grid in both the main and the reverse scrollable directions.
+   * See the `increaseViewportBy` property for a similar behavior (equivalent to the `overscan` in react-window).
    */
   overscan?: number | { main: number; reverse: number }
 
+  /**
+   *
+   * *The property accepts pixel values.*
+   *
+   * Set the increaseViewportBy property to artificially increase the viewport size, causing items to be rendered before outside of the viewport.
+   * The property causes the component to render more items than the necessary, but can help with slow loading content.
+   * Using `{ top?: number, bottom?: number }` lets you set the increase for each end separately.
+   *
+   */
+  increaseViewportBy?: number | { top: number; bottom: number }
+
   /**
    * If specified, the component will use the function to generate the `key` property for each list item.
    */

src/gridSystem.ts

@@ -73,7 +73,7 @@ function dimensionComparator(prev: ElementDimensions, next: ElementDimensions) {
 
 export const gridSystem = /*#__PURE__*/ u.system(
   ([
-    { overscan, visibleRange, listBoundary },
+    { overscan, visibleRange, listBoundary, increaseViewportBy },
     { scrollTop, viewportHeight, scrollBy, scrollTo, smoothScrollTargetReached, scrollContainerState, footerHeight, headerHeight },
     stateFlags,
     scrollSeek,
@@ -408,6 +408,7 @@ export const gridSystem = /*#__PURE__*/ u.system(
       scrollTop,
       scrollHeight,
       overscan,
+      increaseViewportBy,
       scrollBy,
       scrollTo,
       scrollToIndex,