@tanstack/lit-virtual

Efficiently virtualize only the visible DOM nodes within massive scrollable elements using Lit, while maintaining complete control over markup and styles.

VirtualizerController

@tanstack/lit-virtual utilizes Reactive Controllers to create the virtualizer and integrate it with the element lifecycle:

``ts
import { LitElement } from 'lit'
import { VirtualizerController } from '@tanstack/lit-virtual'
import { Ref, createRef } from 'lit/directives/ref.js'

class MyVirtualElement extends LitElement {
private virtualizerController: VirtualizerController
private scrollElementRef: Ref = createRef()

constructor() {
super()
this.virtualizerController = new VirtualizerController(this, {
getScrollElement: () => this.scrollElementRef.value,
count: 10000,
estimateSize: () => 35,
overscan: 5,
})
}

render() {
const virtualizer = this.virtualizerController.getVirtualizer()
const virtualItems = virtualizer.getVirtualItems()

return html

WindowVirtualizerController

You can also create a virtualizer controller that attaches to the Window:

`ts
import { WindowVirtualizerController } from '@tanstack/lit-virtual'

class MyWindowVirtualElement extends LitElement {
private windowVirtualizerController: WindowVirtualizerController

constructor() {
super()
this.windowVirtualizerController = new WindowVirtualizerController(this, {
count: this.data.length,
estimateSize: () => 350,
overscan: 5,
})
}

// Implement render and other lifecycle methods as needed
}
``

For more examples and detailed usage, visit the official documentation.