Skip to content

Commit 73dc760

Browse files
Update readme (#1055)
* update readme * update readme * Update images for responsive design in README * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent e456bc8 commit 73dc760

File tree

3 files changed

+124
-31
lines changed

3 files changed

+124
-31
lines changed

README.md

Lines changed: 98 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,105 @@
1-
![React Virtual Header](https://github.com/tanstack/virtual/raw/main/media/header.png)
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>
224

235
<br />
24-
<br />
256

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
2756

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
2990

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
31102

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>
37104

38-
<!-- Use the Force Luke! -->
105+
<!-- Use the force, Luke -->

media/header_virtual.png

139 KB
Loading

media/partner_logo.svg

Lines changed: 26 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)