tanstack-virtual-patternslisted
Install: claude install-skill smicolon/ai-kit
# TanStack Virtual Patterns
This skill enforces TanStack Virtual best practices for efficient rendering of large lists.
## Basic Virtual List
```typescript
import { useVirtualizer } from '@tanstack/react-virtual'
import { useRef } from 'react'
interface VirtualListProps<T> {
items: T[]
renderItem: (item: T, index: number) => React.ReactNode
estimateSize?: number
}
export function VirtualList<T>({
items,
renderItem,
estimateSize = 50,
}: VirtualListProps<T>) {
const parentRef = useRef<HTMLDivElement>(null)
const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => parentRef.current,
estimateSize: () => estimateSize,
overscan: 5,
})
return (
<div
ref={parentRef}
className="h-[400px] overflow-auto"
>
<div
style={{
height: `${virtualizer.getTotalSize()}px`,
width: '100%',
position: 'relative',
}}
>
{virtualizer.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)`,
}}
>
{renderItem(items[virtualItem.index], virtualItem.index)}
</div>
))}
</div>
</div>
)
}
```
## Dynamic Size Virtual List
```type