{"id":22132448,"url":"https://github.com/chiefgui/virtualform","last_synced_at":"2025-07-25T19:33:00.344Z","repository":{"id":63046885,"uuid":"563616355","full_name":"chiefGui/virtualform","owner":"chiefGui","description":"An ultra-fast, responsive and headless virtualization engine for React.","archived":false,"fork":false,"pushed_at":"2023-02-14T00:23:09.000Z","size":99039,"stargazers_count":74,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-08-08T18:38:19.972Z","etag":null,"topics":["grid","grid-layout","react","react-grid","virtualization","windowing"],"latest_commit_sha":null,"homepage":"https://virtualform.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chiefGui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-11-09T01:19:36.000Z","updated_at":"2024-06-27T12:44:01.000Z","dependencies_parsed_at":"2023-01-31T07:31:03.232Z","dependency_job_id":null,"html_url":"https://github.com/chiefGui/virtualform","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chiefGui%2Fvirtualform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chiefGui%2Fvirtualform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chiefGui%2Fvirtualform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chiefGui%2Fvirtualform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chiefGui","download_url":"https://codeload.github.com/chiefGui/virtualform/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227614534,"owners_count":17793944,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grid","grid-layout","react","react-grid","virtualization","windowing"],"created_at":"2024-12-01T18:41:38.823Z","updated_at":"2024-12-01T18:41:39.556Z","avatar_url":"https://github.com/chiefGui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Virtualform hero](https://i.imgur.com/jcRnTxu.png)\n\n\u003cdiv align=\"center\"\u003e\n\n### An ultra-fast, responsive and headless virtualization engine for React.\n\n[Highlights](#-highlights) · [Before you use](#-before-you-use) · [Documentation](#-documentation) · [Demo](https://virtualform.vercel.app) · [FAQ](#-faq)\n\n\u003c/div\u003e\n\n## ✨ Highlights\n\n#### ⚡ Ultra-fast\n\n**Virtualform** was designed from the bottom up to be fast. We chose [O(1)](https://en.wikipedia.org/wiki/Time_complexity) algorithms and good caching management over [Intersection Observers](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to guarantee lightning fast, consistent performance all around.\n\n#### 🪶 Ultra-lightweight\n\n**Virtualform** aims to be thin and to leave a small footprint. Rest assured: the libraries you are consuming are dependency-free (despite React itself, of course) and monitored by [size-limit](https://github.com/ai/size-limit), which imposes a hard limit to the size of the packages to be [no more than 2 kB](/packages/grid/package.json#L17). To give you a glimpse, [@virtualform/grid](/packages/grid) weighs a mere 1.16 kB, minified and gzipped.\n\n#### 📐 Responsive out of the box\n\nCode once, works everywhere. Automatically. Yes, that's right: you don't have to worry about different screen sizes at all.\n\n#### 💅 Bring your own design\u003csup\u003eTM\u003c/sup\u003e\n\nThanks to its headless nature, **Virtualform** allows you to design your virtualized grid the way you want.\n\n#### 🤓 Friendly, declarative API\n\nVirtualization is not simple. And because of that, we strived for an ergonomic API\u0026mdash;we expect as much as you a smooth developer experience when working with Virtualform.\n\n#### ♾️ Infinite scrolling without abstractions [\u0026rarr;](/packages/grid/recipes/Infinite-Loading.md)\n\nThe way you achieve infinite scrolling with **Virtualform** is up to you. It may sound boring, but in reality, this is us helping you in the long term. **Virtualform** gives you some tools to help you with it, but our intention is not crossing the line in your codebase.\n\n#### \u003cimg src=\"https://i.imgur.com/pEC5TKB.png\" width=\"20\" height=\"20\" align=\"center\" alt=\"TypeScript unofficial logo\" /\u003e \u003cspan\u003eWritten in TypeScript\u003c/span\u003e\n\nWhat not to love about type safety and autocompletion?\n\n## ✋ Before you use\n\n**Virtualform** is currently pretty stable as is, but designed to satisfy our needs at [Starchive](https://starchive.io). For example, it still does not virtualize plain, vertical lists or masonry-like grids. Also, it is fully responsive without the option to opt-out.\n\nThat said, at the time I'm writing this, I'd only suggest you to use **Virtualform** if you are specifically looking for a way to virtualize symmetrical, responsive grids. Otherwise, I'd suggest you to use [react-window](https://github.com/bvaughn/react-window).\n\n## 📚 Documentation\n\n- [Grid](/packages/grid)\n- List (under development)\n- Masonry (under development)\n\n## 🆘 FAQ\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eWhat is virtualization?\u003c/b\u003e\u003c/summary\u003e\n\nVirtualization, or windowing, is the concept of \"unloading\" content that's not visible to the human eye, hence making your application more performant.\n\nImagine Instagram's feed: you can spend a day scrolling down and you don't feel any lags or glitches. That's because anything you don't see, thanks to virtualization, is freed from CPU computation.\n\nThere are plenty of nuances here I don't want to dive into, but in a nutshell, that's how virtualization can be understood.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eIs virtualization for me?\u003c/b\u003e\u003c/summary\u003e\n\nIt depends. Virtualization is only useful when you are dealing with a great, or an unpredictable, amount of data.\n\nTo give you a sense of scale,\n\n- I wouldn't bother if I had to render up to 100-200 pictures. Anything beyond that though, I'd definitely virtualize.\n- I wouldn't bother to virtualize data that aren't paginated through infinite loading. I'd display 100 items per page and that's it.\n\nVirtualization comes at a very expensive cost: complexity. It makes your codebase more difficult to maintain, more difficult to understand and if not done properly, it may lock you in a place where you become a hostage, really hard to get out.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eWhy Virtualform was created?\u003c/b\u003e\u003c/summary\u003e\n\nAt [Starchive](https://starchive.io), we render huge grids of files and the painting, loading and scrolling experience have to be fast and seamless. We already used other virtualization libraries that did a pretty good job, but we always had the feeling that either a feature was missing or proper developer experience was lacking.\n\n**Virtualform** was built from scratch to address the two problems at the same time.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eWhy Virtualform instead of __________?\u003c/b\u003e\u003c/summary\u003e\n\n#### Hooks instead of components.\n\nComponents are not a bad thing per say, but hooks give you power at a greater scope than a component does.\n\n#### Responsive out of the box.\n\nGive us the components and we make them responsive.\n\n#### Predictable and headless.\n\nNo hidden wrapping divs or styles\u0026mdash;you own the visuals and the DOM tree.\n\n#### Not only fast. Ultra-fast.\n\n[Check out the demo with 100k cells](https://virtualform.vercel.app/)\n\n#### Well documented.\n\nWe put great effort on making the documentation incredible. We expect both beginners and experienced devs to be able to read and understand the tidbits of **Virtualform**.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eHow stable is Virtualform right now?\u003c/b\u003e\u003c/summary\u003e\n\nAs is, it's pretty stable\u0026mdash;we are using it in production.\n\nHowever, note that its API can change. And I say \"can\" instead of \"should\" or \"may\" because there are no plans for it. If needed though, it'll be changed.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eWhere's feature X?\u003c/b\u003e\u003c/summary\u003e\n\n**Virtualform** is an ongoing project that first has to satisfy the needs we have at [Starchive](https://starchive.io). Everything it offers right now is based on our demands at the company. If it lacks a feature you need, feel free to submit a Pull Request or Create an Issue asking for it.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eWill Virtualform support lists/tabular data other than grids?\u003c/b\u003e\u003c/summary\u003e\n\nYes.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eWill Virtualform support Masonry-like grids?\u003c/b\u003e\u003c/summary\u003e\n\nVery likely.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eWill Virtualform support horizontal scrolling?\u003c/b\u003e\u003c/summary\u003e\n\nVery likely.\n\n\u003c/details\u003e\n\n---\n\n#### Brought to you by 🇧🇷 [Guilherme \"chiefGui\" Oderdenge](https://github.com/chiefGui) and [Starchive](https://starchive.io/).\n\n---\n\nThe MIT License (MIT)\n\nCopyright (c) 2022 Guilherme Oderdenge\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchiefgui%2Fvirtualform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchiefgui%2Fvirtualform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchiefgui%2Fvirtualform/lists"}