Virtual

Try it in 3 steps

1. 1

   Prepare the pinned core package

   Requires Node.js and npm. Create a temporary project pinned to virtual-core 3.17.11.

   demo=$(mktemp -d "${TMPDIR:-/tmp}/tanstack-virtual.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @tanstack/virtual-core@3.17.11Copy
2. 2

   Provide virtual-list measurements

   Model 100 thirty-pixel items in a 90-pixel viewport at offset 300, with one overscan item on each side.

   printf '%s\n' 'import {Virtualizer} from '\''@tanstack/virtual-core'\''' 'let setRect,setOffset' 'const v=new Virtualizer({count:100,getScrollElement:()=>({}),estimateSize:()=>30,overscan:1,observeElementRect:(_,cb)=>{setRect=cb;return()=>{}},observeElementOffset:(_,cb)=>{setOffset=cb;return()=>{}},scrollToFn(){}})' 'v._didMount();v._willUpdate()' 'setRect({width:300,height:90});setOffset(300,false)' 'console.log(v.getVirtualItems().map(item=>item.index).join('\'','\''))' > demo.mjsCopy
3. 3

   Verify the render range

   Require indices 9 through 13: visible items 10–12 plus one overscan item on either side.

   test "$(node demo.mjs)" = "9,10,11,12,13"Copy

Built with

• TypeScript
• React
• JavaScript
• Svelte
• Vue

Categories and tags

GitHub data

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Explore next

• Table28,474 Stars

  5 shared tag(s) · 1 shared category(s) · Same language

  A headless library for composing table sorting, filtering, and pagination without prescribing markup

  TypeScript
• TanStack Query50,394 Stars

  3 shared tag(s) · 1 shared category(s) · Same language

  Manage fetching, caching, refetching, and mutations for remote server state outside local UI-state code

  TypeScript
• Onsen UI8,854 Stars

  3 shared tag(s) · 1 shared category(s)

  build iOS- and Android-style interfaces from shared HTML and JavaScript with Web Components

  JavaScript
• Storybook91,200 Stars

  3 shared tag(s) · Same language

  capture UI states once and reuse them across docs, interaction tests, and agent tooling

  TypeScript
• Router15,152 Stars

  3 shared tag(s) · Same language

  A type-safe React router that connects routes, search parameters, and navigation through one inferred type model

  TypeScript
• Builder.io SDKs8,863 Stars

  3 shared tag(s) · Same language

  Connect a hosted visual-development platform to existing React, Vue, Svelte, and other frontends through open SDKs

  TypeScript