svelte-vlist

A high-performance virtual list component for Svelte that efficiently renders large amounts of data.

Features

• 🚀 High Performance: Only renders visible items, dramatically improving performance with large datasets
• 📦 Lightweight: Minimal bundle size with no external dependencies
• 🎯 Easy to Use: Simple API with slot-based rendering
• 🔄 Dynamic Heights: Automatically handles variable item heights
• 📱 Responsive: Works seamlessly across all device sizes

Installation

npm install svelte-vlist

Usage

<script>
  import VirtualList from 'svelte-vlist';
  
  let items = [/* your data array */];
  let start = 0;
  let end = 0;
</script>

<VirtualList items={items} bind:start bind:end let:item let:index>
  <div class="item">
    <h3>{item.title}</h3>
    <p>Index: {index}</p>
  </div>
</VirtualList>

Props

• items (Array, required): The array of data items to render
• height (String, default: "100%"): The height of the virtual list container
• start (Number, bindable): The starting index of visible items
• end (Number, bindable): The ending index of visible items

Slot Props

• item: The current item data
• index: The index of the current item in the original array

License

MIT