Overview

The virtual list component is designed to render only the items that are visible, providing a lighter and more efficient way to display large amounts of data on a page. Inspired by react-tiny-virtual-list, this component is tiny, dependency-free, and capable of rendering millions of items with ease. It supports various customization options such as scrolling to a specific index, fixed or variable heights/widths, and vertical or horizontal layouts.

Features

• Tiny & dependency free: Only ~5kb gzipped
• Render millions of items: Without performance issues
• Scroll to index or set initial scroll offset
• Supports fixed or variable heights/widths
• Vertical or Horizontal lists
• Svelte-infinite-loading compatibility

Installation

If you’re using this component in a Sapper application, remember to install the package to devDependencies. Here are different installation methods:

# With npm
npm install virtual-list

# With yarn
yarn add virtual-list

# With pnpm
pnpm install virtual-list

# From CDN (via unpkg)
https://unpkg.com/virtual-list

Summary

The virtual list component offers a lightweight solution for efficiently rendering large datasets on a web page. With features such as support for millions of items, scroll customization, and compatibility with Svelte-infinite-loading, this component provides a seamless way to manage and display data in both vertical and horizontal layouts.