VirtualList

VirtualList renders only the rows that fit the visible viewport (plus a small overscan), making lists with thousands of fixed-height rows fast to scroll. It has no external dependencies — just plain scroll math.

#Default usage

<VirtualList
  aria-label="Workspace items"
  height={180}
  itemHeight={40}
  items={Array.from({ length: 200 }, (_, index) => `Item ${index + 1}`)}
/>

A custom row renderer is supported via renderItem:

<VirtualList
  aria-label="Workspace items"
  height={180}
  itemHeight={40}
  items={data}
  renderItem={(item) => <span>{item.label}</span>}
/>

#Import

import { VirtualList } from "@froggdesign/enter-ui-react";

#Accessibility

VirtualList renders the wrapper as role="list" by default and each rendered row as role="listitem", with aria-rowcount reporting the full item count. Pass role={null} for a non-list region.

#API

• items: readonly source array.
• itemHeight: fixed pixel height per row.
• height: viewport pixel height.
• renderItem(item, index): row renderer.
• getItemKey(item, index): optional stable key resolver.
• overscan: rows rendered above and below the viewport (default 4).

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.