docs: add directDomUpdates and directDomUpdatesMode options

[piecyk]

🎯 Changes

Add missing documentation for the directDomUpdates and directDomUpdatesMode React-specific options to the React Virtual docs page.

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

• Documentation
  • Added user-facing documentation for two React Virtualizer options—directDomUpdates and directDomUpdatesMode—including how to enable them, required layout/positioning constraints, guidance on choosing between positioning modes, example usage, and a caution about toggling these options at runtime to avoid stale inline styles.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 10c870b7-9a8b-4c14-a557-dea9a35c4154

📥 Commits

Reviewing files that changed from the base of the PR and between 3f827b5 and d09292e.

📒 Files selected for processing (2)

• docs/framework/react/react-virtual.md
• packages/react-virtual/src/index.tsx

✅ Files skipped from review due to trivial changes (1)

• packages/react-virtual/src/index.tsx

---

📝 Walkthrough

Walkthrough

Documentation for two new React Virtualizer options is added: directDomUpdates (bypasses React re-renders for scroll-only DOM updates) and directDomUpdatesMode (selects 'transform' or 'position' positioning). Includes constraints, warnings, and usage examples; plus minor JSDoc wording tweaks in the package.

Changes

Direct DOM Updates Documentation

Layer / File(s)	Summary
directDomUpdates and directDomUpdatesMode options documentation docs/framework/react/react-virtual.md	Adds sections documenting directDomUpdates defaults, behavioral effects, mount-time requirements (absolute positioning, container constraints), runtime toggle warnings, and configuration examples; documents directDomUpdatesMode type, default, and distinction between 'transform' and 'position' modes with examples.
inline JSDoc wording updates packages/react-virtual/src/index.tsx	Small wording adjustments in ReactVirtualizer and ReactVirtualizerOptions JSDoc to clarify “inner size” phrasing and align the containerRef/directDomUpdates requirement text.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• TanStack/virtual#1180: Implements the directDomUpdates feature and DOM update logic that this PR documents.

Poem

🐰 I hopped through docs to plant a clue,
Two flags to skip a render or two,
Transform or position, choose your tune,
I’ll nibble notes beneath the moon,
Hooray—fast scrolls, and happy view!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: adding documentation for two React Virtualizer options (directDomUpdates and directDomUpdatesMode).
Description check	✅ Passed	The description follows the template structure with all required sections completed: Changes section explains what was added, both checklist items are marked as completed, and Release Impact correctly identifies this as docs-only with no changeset needed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit d09292e

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	✅ Succeeded	34s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	18s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-06-02 06:57:54 UTC

[pkg-pr-new]

More templates

• @tanstack/virtual-example-angular-dynamic
• @tanstack/virtual-example-angular-fixed
• @tanstack/virtual-example-angular-infinite-scroll
• @tanstack/virtual-example-angular-padding
• @tanstack/virtual-example-angular-smooth-scroll
• @tanstack/virtual-example-angular-sticky
• @tanstack/virtual-example-angular-table
• @tanstack/virtual-example-angular-variable
• @tanstack/virtual-example-angular-window
• tanstack-lit-virtual-example-dynamic
• tanstack-lit-virtual-example-fixed
• tanstack-react-virtual-example-chat
• tanstack-react-virtual-example-dynamic
• tanstack-react-virtual-example-fixed
• tanstack-react-virtual-example-infinite-scroll
• tanstack-react-virtual-example-padding
• tanstack-react-virtual-example-pretext
• tanstack-react-virtual-example-scroll-padding
• tanstack-react-virtual-example-smooth-scroll
• tanstack-react-virtual-example-sticky
• tanstack-react-virtual-example-table
• tanstack-react-virtual-example-variable
• tanstack-react-virtual-example-window
• tanstack-svelte-virtual-example-dynamic
• tanstack-svelte-virtual-example-fixed
• tanstack-svelte-virtual-example-infinite-scroll
• tanstack-svelte-virtual-example-smooth-scroll
• tanstack-svelte-virtual-example-sticky
• tanstack-svelte-virtual-example-table
• tanstack-vue-virtual-example-dynamic
• tanstack-vue-virtual-example-fixed
• tanstack-vue-virtual-example-infinite-scroll
• tanstack-vue-virtual-example-padding
• tanstack-vue-virtual-example-scroll-padding
• tanstack-vue-virtual-example-smooth-scroll
• tanstack-vue-virtual-example-sticky
• tanstack-vue-virtual-example-table
• tanstack-vue-virtual-example-variable

@tanstack/angular-virtual

npm i https://pkg.pr.new/@tanstack/angular-virtual@1185

@tanstack/lit-virtual

npm i https://pkg.pr.new/@tanstack/lit-virtual@1185

@tanstack/react-virtual

npm i https://pkg.pr.new/@tanstack/react-virtual@1185

@tanstack/solid-virtual

npm i https://pkg.pr.new/@tanstack/solid-virtual@1185

@tanstack/svelte-virtual

npm i https://pkg.pr.new/@tanstack/svelte-virtual@1185

@tanstack/virtual-core

npm i https://pkg.pr.new/@tanstack/virtual-core@1185

@tanstack/vue-virtual

npm i https://pkg.pr.new/@tanstack/vue-virtual@1185

commit: d09292e

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/framework/react/react-virtual.md`:
- Line 87: Replace the phrase "inner sized container" with the hyphenated form
"inner-sized container" in the sentence that mentions virtualizer.containerRef
(the line that reads the inner sized container must receive
`virtualizer.containerRef` and must **not** set `height` / `width` in its style)
so the documentation reads "inner-sized container" for correct
compound-adjective hyphenation and improved readability.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 85cbd494-c324-48a5-bd8b-407b3e7302fb

📥 Commits

Reviewing files that changed from the base of the PR and between c0b84c8 and 3f827b5.

📒 Files selected for processing (1)

• docs/framework/react/react-virtual.md