`

Infinite Loading

To simplify the use in infinite loading scenarios, tanstack-virtual-list provides a component, which is a simple wrapper based on IntersectionObserver, and you can trigger the behavior of loading the next page of data through its onAppear event.

`tsx
import React, { useEffect, useState } from 'react';
import VirtualList, { Loader } from 'tanstack-virtual-list';

export default function App() {
const [pageNo, setPageNo] = useState(0);
const [fetchingNextPage, setFetchingNextPage] = useState(false);
const [dataSource, setDataSource] = useState([]);
const [hasNextPage, setHasNextPage] = useState(true);

const fetchNextPage = async (pageNo = 0) => {
console.log('Fetching', pageNo);
setFetchingNextPage(true);
const res = await mockRequest(pageNo);
console.log('√ Fetched', pageNo);

setFetchingNextPage(false);
setDataSource([...dataSource, ...res.data.data]);
setHasNextPage(res.data.hasNext);
};

useEffect(() => {
if (fetchingNextPage || !hasNextPage) return;
fetchNextPage(pageNo);
}, [pageNo]);

const handleLoaderAppear = () => {
console.log('Loader appears, fetching next page...');
setPageNo((no) => no + 1);
};

return (
<>
{dataSource.length ? (
getItemHeight={() => 50}
overscan={5}
dataSource={dataSource.concat(['_Loader_'])}
getItemKey={(item, index) => item}
renderItem={(item, index) => {
const isLoaderItem = index > dataSource.length - 1;

return (


In this example we place in the last position of data sources(by dataSource.concat(['_Loader_']))，and render in renderItem function. You can also place it in anywhere you like.

Configurations

tanstack-virtual-list preserves serveral properties from useVirtualizer param, and, to prevent unknown DOM properties error, less commonly used properties will be placed in useVirtualizerOptions.

$3

- T[]
- Required

The data source to render list items.
tanstack-virtual-list provides first-level typescript support, as it infers type of data item from dataSource.

$3

- (item: T, index: number, virtualItem: VirtualItem) => React.ReactNode
- Required

Specify how to render item.

$3

- (item: TDataSource, index: number) => number
- Required

Specify how to calculate item height.

This is also required when using dynamic mode as initial rect provider.

$3

- (item: TDataSource, index: number) => React.Key
- default: (item, index) => index

Specify how to get item's key.

If not specified, tanstack-virtual-list use item index as fallback.

$3

- boolean
- default: false

Whether to enable dynamic mode.

Dynamic mode using a complete different layout compared to fixed mode, so make sure you need to use it indeed.

This is not a natively provided configuration, but used by tanstack-virtual-list it self.

$3

- boolean
- default: false

Whether to use horizontal layout.

See virtualizer#horizontal for details.

$3

- number
- default: 0

See virtualizer#overscan for details.

$3

- number
- default: 0

See virtualizer#initialoffset for details.

$3

- string
- default: 'tanstack-virtual-list'

This attribute is used internally in the component to determine the class name of layout containers, like:

- div.tanstack-virtual-list-container
- div.tanstack-virtual-list-content
- div.tanstack-virtual-list-item
- div.tanstack-virtual-list-item
- div.tanstack-virtual-list-item
- ...

$3

- number | [start?: number, end?: number]
- default: 0

A shortcut for virtualizer#paddingstart | virtualizer#paddingend .

- input: 10 → output: [10, 10]
- input: [10, 20] → output: [10, 20]

$3

Nearly same to padding.

See virtualizer#scrollpaddingstart | virtualizer#scrollpaddingend for more details.

useVirtualizerOptions

See Virtualizer here for more configurations on @tanstack/react-virtual.

Ref

tanstack-virtual-list provides ref expose and corresponding typing：

`typescript
import React, { useRef } from 'react';

import VirtualList, { type VirtualListRef } from tanstack-virtual-list';

export default function App() {
const ref = useRef(null);

const scrollTo20 = () => {
ref.current?.scrollToIndex(20);
};

return (
<>
ref={ref}
className='List'
getItemHeight={() => 50}
dataSource={DataSource}
renderItem={(item, index) => {
return