Virtual

3ステップで試す

1. 1

   固定版のコアを準備する

   Node.jsとnpmが必要です。一時ディレクトリに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.11コピー
2. 2

   仮想一覧の条件を与える

   100件・各30px・表示高90px・スクロール位置300pxを模した仮想一覧を作ります。前後1件の余白も指定します。

   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.mjsコピー
3. 3

   描画対象の範囲を検証する

   画面内の10〜12番に前後1件を加え、9〜13番だけが描画対象になることを確認します。

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

Built with

• TypeScript
• React
• JavaScript
• Svelte
• Vue

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• Table28,474 Stars

  共通タグ 5件 · 共通カテゴリ 1件 · 同じ言語

  表示方法を決めずに、表の並べ替え、絞り込み、ページ分割を組み立てるヘッドレスライブラリ

  TypeScript
• TanStack Query50,394 Stars

  共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語

  remote/server stateのfetch・cache・refetch・mutationをUI frameworkから分離して管理するasync state library

  TypeScript
• Onsen UI8,854 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  Web Componentsを中心にiOS/Android風UIを同じHTML・JavaScriptから構築する

  JavaScript
• Storybook91,200 Stars

  共通タグ 3件 · 同じ言語

  UI状態をstoryとして保存し、Docs・interaction test・AI toolへ再利用するfrontend workshop

  TypeScript
• Router15,152 Stars

  共通タグ 3件 · 同じ言語

  React向けの型安全な経路定義、検索条件、画面遷移を一つの型情報で結ぶルーター

  TypeScript
• Builder.io SDKs8,863 Stars

  共通タグ 3件 · 同じ言語

  Visual Development platformを既存のReact・Vue・Svelte等へ接続するOSS SDK群

  TypeScript