Awesome
Headless UI for virtualizing scrollable elements in TS/JS and React
<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent"> <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack" /> </a><a href="https://github.com/TanStack/virtual/actions/workflows/ci.yml"> <img src="https://github.com/tanstack/virtual/actions/workflows/ci.yml/badge.svg" /> </a><a href="https://npmjs.com/package/@tanstack/virtual-core" target="\_parent"> <img alt="" src="https://img.shields.io/npm/dm/@tanstack/virtual-core.svg" /> </a><a href="https://bundlephobia.com/result?p=@tanstack/virtual@latest" target="\_parent"> <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/virtual@latest" /> </a><a href="#badge"> <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg"> </a><a href="https://github.com/tanstack/virtual/discussions"> <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" /> </a><a href="https://github.com/tanstack/virtual" target="\_parent"> <img alt="" src="https://img.shields.io/github/stars/tanstack/virtual.svg?style=social&label=Star" /> </a><a href="https://twitter.com/tannerlinsley" target="\_parent"> <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" /> </a> <br /> <br />Enjoy this library? Try the entire TanStack! React Query, TanStack Table, React Charts
Visit tanstack.com/virtual for docs, guides, API and more!
Quick Features
- Row, Column, and Grid virtualization
- One single headless function
- Fixed, variable and dynamic measurement modes
- Imperative scrollTo control for offset, indices and alignment
- Custom scrolling function support (eg. smooth scroll)