@virtual-grid/react@2.0.0

6002f32

Breaking changes

• grid.virtualizer has been replaced by grid.rowVirtualizer and grid.columnVirtualizer
• onLoadMore and loadMoreSize are not exported by useGrid anymore
• rowVirtualizer and columnVirtualizer can't be passed to useGrid anymore
• Properties of grid.padding and grid.gap are now partial

Simplified headless integration

useGrid now exports two new functions getVirtualItem and getLoadMoreTrigger which immensely reduce boilerplate code when integrating a headless solution.

Example using getVirtualItem:

{rowVirtualizer.getVirtualItems().map((row) => {
    const item = grid.getVirtualItem({ row });
    if (!item) return null;

    return (
        <div key={row.key} style={item.style}>
            ...
        </div>
    );
})}

Example using getLoadMoreTrigger in combination with the new <LoadMoreTrigger /> component.
See Example

 <LoadMoreTrigger {...grid.getLoadMoreTrigger()} />

Scroll margin has also been simplified with the new useScrollMargin hook.
See Example

 const { scrollMargin } = useScrollMargin({ scrollRef, gridRef });

 // ...

 const item = grid.getVirtualItem({ row, scrollMargin });

Other changes

• rows and columns are now independent of horizontal
• Rows are now also resizable based on the height of the grid and number of rows using horizontal. Previously this was only possible with columns.
• Improved performance by only measuring on demand
• Bump @tanstack/react-virtual to 3.0.1

What's up next?

• Improve docs
• Add more examples
• SolidJS integration. We got an active PR here.

PR - Documentation