|
1 |
| - |
2 |
| - |
3 |
| -Headless UI for virtualizing scrollable elements in TS/JS and React |
4 |
| - |
5 |
| -<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent"> |
6 |
| - <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" /> |
7 |
| -</a><a href="https://github.com/TanStack/virtual/actions/workflows/ci.yml"> |
8 |
| -<img src="https://github.com/tanstack/virtual/actions/workflows/ci.yml/badge.svg" /> |
9 |
| -</a><a href="https://npmjs.com/package/@tanstack/virtual-core" target="\_parent"> |
10 |
| - <img alt="" src="https://img.shields.io/npm/dm/@tanstack/virtual-core.svg" /> |
11 |
| -</a><a href="https://bundlephobia.com/result?p=@tanstack/virtual@latest" target="\_parent"> |
12 |
| - <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/virtual@latest" /> |
13 |
| -</a><a href="#badge"> |
14 |
| - <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg"> |
15 |
| - </a><a href="https://github.com/tanstack/virtual/discussions"> |
16 |
| - <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" /> |
17 |
| -</a><a href="https://github.com/tanstack/virtual" target="\_parent"> |
18 |
| - <img alt="" src="https://img.shields.io/github/stars/tanstack/virtual.svg?style=social&label=Star" /> |
19 |
| -</a><a href="https://twitter.com/tannerlinsley" target="\_parent"> |
20 |
| - <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" /> |
21 |
| -</a> |
| 1 | +<div align="center"> |
| 2 | + <img src="./media/header_virtual.png" alt="Tanstack Virtual"> |
| 3 | +</div> |
22 | 4 |
|
23 | 5 | <br />
|
24 |
| -<br /> |
25 | 6 |
|
26 |
| -Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Query](https://github.com/TanStack/react-query), [TanStack Table](https://github.com/TanStack/table), [React Charts](https://github.com/TanStack/react-charts) |
| 7 | +<div align="center"> |
| 8 | + <a href="https://npmjs.com/package/@tanstack/virtual-core" target="\_parent"> |
| 9 | + <img alt="npm downloads" src="https://img.shields.io/npm/dm/@tanstack/virtual-core.svg" /> |
| 10 | +</a> |
| 11 | + <a href="https://github.com/tanstack/virtual" target="\_parent"> |
| 12 | + <img alt="github stars" src="https://img.shields.io/github/stars/tanstack/virtual.svg?style=social&label=Star" /> |
| 13 | +</a> |
| 14 | +<a href="https://bundlephobia.com/result?p=@tanstack/virtual-core@latest" target="\_parent"> |
| 15 | + <img alt="bundle size" src="https://badgen.net/bundlephobia/minzip/@tanstack/virtual-core@latest" /> |
| 16 | +</a> |
| 17 | +</div> |
| 18 | + |
| 19 | +<div align="center"> |
| 20 | + <a href="#badge"> |
| 21 | + <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg"> |
| 22 | + </a> |
| 23 | + <a href="https://bestofjs.org/projects/tanstack-virtual"> |
| 24 | + <img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%2Fvirtual%26since=daily" alt="Best of JS"/> |
| 25 | + </a> |
| 26 | + <a href="https://twitter.com/tan_stack"> |
| 27 | + <img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/> |
| 28 | + </a> |
| 29 | +</div> |
| 30 | + |
| 31 | +<div align="center"> |
| 32 | + |
| 33 | +### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/) |
| 34 | + |
| 35 | +</div> |
| 36 | + |
| 37 | +# TanStack Virtual |
| 38 | + |
| 39 | +A headless, framework‑agnostic virtualization library for rendering massive lists, grids, and tables at 60FPS while giving you full control over markup and styles. |
| 40 | + |
| 41 | +- Framework‑agnostic & headless |
| 42 | +- Virtualizes vertical, horizontal & grid layouts with a single hook/function |
| 43 | +- Lightweight (10–15kb) yet powerful, with dynamic & measured sizing support |
| 44 | +- Smooth 60FPS scrolling with sticky items and window‑scrolling utilities |
| 45 | + |
| 46 | +### <a href="https://tanstack.com/virtual" >Read the docs →</a> |
| 47 | + |
| 48 | +## Get Involved |
| 49 | + |
| 50 | +- We welcome issues and pull requests! |
| 51 | +- Participate in [GitHub discussions](https://github.com/TanStack/virtual/discussions) |
| 52 | +- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ) |
| 53 | +- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions |
| 54 | + |
| 55 | +## Partners |
27 | 56 |
|
28 |
| -## Visit [tanstack.com/virtual](https://tanstack.com/virtual) for docs, guides, API and more! |
| 57 | +<table align="center"> |
| 58 | + <tr> |
| 59 | + <td> |
| 60 | + <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS"> |
| 61 | + <picture> |
| 62 | + <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg" height="40" /> |
| 63 | + <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" /> |
| 64 | + <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" /> |
| 65 | + </picture> |
| 66 | + </a> |
| 67 | + </td> |
| 68 | + <td padding="20"> |
| 69 | + <a href="https://www.cloudflare.com?utm_source=tanstack"> |
| 70 | + <picture> |
| 71 | + <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" /> |
| 72 | + <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" /> |
| 73 | + <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" /> |
| 74 | + </picture> |
| 75 | + </a> |
| 76 | + </td> |
| 77 | + </tr> |
| 78 | +</table> |
| 79 | + |
| 80 | + |
| 81 | +<div align="center"> |
| 82 | +<img src="./media/partner_logo.svg" alt="Virtual & you?" height="65"> |
| 83 | +<p> |
| 84 | +We're looking for TanStack Virtual Partners to join our mission! Partner with us to push the boundaries of TanStack Virtual and build amazing things together. |
| 85 | +</p> |
| 86 | +< a href= "mailto:[email protected]?subject=TanStack Virtual Partnership">< b>LET'S CHAT</ b></ a> |
| 87 | +</div> |
| 88 | + |
| 89 | +## Explore the TanStack Ecosystem |
29 | 90 |
|
30 |
| -## Quick Features |
| 91 | +- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages |
| 92 | +- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store |
| 93 | +- <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel |
| 94 | +- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state |
| 95 | +- <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> – Debouncing, throttling, batching <br/> |
| 96 | +- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching |
| 97 | +- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives |
| 98 | +- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state |
| 99 | +- <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming |
| 100 | +- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store |
| 101 | +- <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids |
31 | 102 |
|
32 |
| -- Row, Column, and Grid virtualization |
33 |
| -- One single **headless** function |
34 |
| -- Fixed, variable and dynamic measurement modes |
35 |
| -- Imperative scrollTo control for offset, indices and alignment |
36 |
| -- Custom scrolling function support (eg. smooth scroll) |
| 103 | +… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a> |
37 | 104 |
|
38 |
| -<!-- Use the Force Luke! --> |
| 105 | +<!-- Use the force, Luke --> |
0 commit comments