diff --git a/src/VirtuosoGrid.tsx b/src/VirtuosoGrid.tsx index 639b31854..d253ada91 100644 --- a/src/VirtuosoGrid.tsx +++ b/src/VirtuosoGrid.tsx @@ -275,6 +275,7 @@ const { logLevel: 'logLevel', restoreStateFrom: 'restoreStateFrom', initialTopMostItemIndex: 'initialTopMostItemIndex', + increaseViewportBy: 'increaseViewportBy', }, methods: { scrollTo: 'scrollTo', diff --git a/src/component-interfaces/VirtuosoGrid.ts b/src/component-interfaces/VirtuosoGrid.ts index e12d8d349..1c238042b 100644 --- a/src/component-interfaces/VirtuosoGrid.ts +++ b/src/component-interfaces/VirtuosoGrid.ts @@ -61,10 +61,22 @@ export interface VirtuosoGridProps 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. */ diff --git a/src/gridSystem.ts b/src/gridSystem.ts index 34683352f..b41e1697a 100644 --- a/src/gridSystem.ts +++ b/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,