Svelte Tiny Virtual List
A tiny but mighty list virtualization library for Svelte, with zero dependencies Supports variable heights/widths, sticky items, scrolling to index, and more!
Overview
The virtual list component is designed to efficiently render large amounts of data by only rendering the items that are visible on the page. This helps keep the page lightweight and quick to load. The component is inspired by the react-tiny-virtual-list and utilizes its code and functionality.
Features
- Tiny & dependency free, with a gzipped size of only ~5kb
- Ability to render millions of items without any performance issues
- Option to scroll to a specific index or set the initial scroll offset
- Supports both fixed or variable heights/widths
- Can be used to create both vertical and horizontal lists
- Compatible with svelte-infinite-loading plugin
NPM
npm install --save-dev @virtual-list/svelte
Yarn
yarn add --dev @virtual-list/svelte
PNPM
pnpm add --save-dev @virtual-list/svelte
CDN (via unpkg)
<script src="https://unpkg.com/@virtual-list/svelte"></script>
Summary
The virtual list component offers a lightweight and efficient way to render large amounts of data on a webpage. With its ability to render only the visible items, it helps keep the page light and responsive. It is easy to install and offers a range of features such as scrolling to a specific index or setting the initial scroll offset. It also works well with the svelte-infinite-loading plugin, making it a versatile choice for handling large lists of data.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Rollup
RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.