<arc-virtual-list
  id="my-list"
  item-height="48"
  overscan="5"
  style="height: 400px;"
></arc-virtual-list>

<script type="module">
  const vl = document.getElementById('my-list');
  const data = Array.from({ length: 10000 }, (_, i) => `Row ${i + 1}`);
  vl.items = data;

  // Sync slotted DOM elements to the visible window
  function syncSlots() {
    const { start, end } = vl.visibleRange;
    // Remove items that scrolled out of view
    for (const child of [...vl.children]) {
      const idx = parseInt(child.slot.replace('item-', ''), 10);
      if (idx < start || idx >= end) child.remove();
    }
    // Add items that scrolled into view
    for (let i = start; i < end; i++) {
      if (!vl.querySelector(`[slot="item-${i}"]`)) {
        const div = document.createElement('div');
        div.slot = `item-${i}`;
        div.textContent = data[i];
        vl.appendChild(div);
      }
    }
  }

  vl.addEventListener('scroll', () => requestAnimationFrame(syncSlots));
  vl.updateComplete.then(syncSlots);
</script>

import { useRef, useEffect, useCallback } from 'react';
import { VirtualList } from '@arclux/arc-ui-react';

const data = Array.from({ length: 10000 }, (_, i) => `Row ${i + 1}`);

function MyVirtualList() {
  const ref = useRef<any>(null);
  const [range, setRange] = useState({ start: 0, end: 20 });

  const onScroll = useCallback(() => {
    const vl = ref.current;
    if (vl) setRange({ ...vl.visibleRange });
  }, []);

  return (
    <VirtualList ref={ref} items={data} item-height={48} style={{ height: '400px' }}
      onScroll={onScroll}>
      {data.slice(range.start, range.end).map((label, i) => (
        <div key={range.start + i} slot={`item-${range.start + i}`}>{label}</div>
      ))}
    </VirtualList>
  );
}

<script setup>
import { VirtualList } from '@arclux/arc-ui-vue';

const items = Array.from({ length: 10000 }, (_, i) => ({
  id: i,
  name: `Row ${i + 1}`,
}));
</script>

<template>
  <VirtualList :items="items" item-height="48" :overscan="5" style="height: 400px" />
</template>

<script>
  import { VirtualList } from '@arclux/arc-ui-svelte';

  const items = Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    name: `Row ${i + 1}`,
  }));
</script>

<VirtualList {items} item-height={48} overscan={5} style="height: 400px" />

import { Component } from '@angular/core';
import { VirtualList } from '@arclux/arc-ui-angular';

@Component({
  imports: [VirtualList],
  template: `
    <VirtualList [items]="items" item-height="48" [overscan]="5" style="height: 400px" />
  `,
})
export class LargeListComponent {
  items = Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    name: `Row ${i + 1}`,
  }));
}

import { VirtualList } from '@arclux/arc-ui-solid';

const items = Array.from({ length: 10000 }, (_, i) => ({
  id: i,
  name: `Row ${i + 1}`,
}));

<VirtualList items={items} item-height={48} overscan={5} style={{ height: '400px' }} />

import { VirtualList } from '@arclux/arc-ui-preact';

const items = Array.from({ length: 10000 }, (_, i) => ({
  id: i,
  name: `Row ${i + 1}`,
}));

<VirtualList items={items} item-height={48} overscan={5} style={{ height: '400px' }} />