useWindowVirtualizer in v3 beta

[dbmzzo]

Hi all, I love the library!

I'm attempting to implement window scrolling and can't seem to get the options quite right. How should the configuration for useWindowVirtualizer differ from useVirtualizer? Is there an example of window scrolling that uses the v3 beta?

Thanks for all the great work!

[matthewma7]

I believe useWindowVirtualizer is used when the whole html window is the scroll container, vs useVirtualizer is when a sub section like a div is the scroll container.

[saiy2k]

I am able to get it working with

import { useWindowVirtualizer } from '@tanstack/react-virtual';
import listData from '../public/list.json';

export default function TList() {

const parentRef             =   useRef();

const rowVirtualizer        =   useWindowVirtualizer({
    count                   :   listData.length,
    estimateSize            :   (index) => 120,
    overscan                :   2
})

return <div className='row' style={{ height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }} >

    { rowVirtualizer.getVirtualItems().map((virtualItem) => 
        <div 
            key={ virtualItem.key } 
            style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: `${virtualItem.size}px`,
                transform: `translateY(${virtualItem.start}px)`,
              }}
        >
            <DetailItem item={ listData[virtualItem.index] } />
        </div>
    )}
</div>

}