# @askrjs/ui/virtual-list

> Published API exports for @askrjs/ui/virtual-list.

Source: [https://askrjs.com/docs/reference/api/ui/virtual-list](https://askrjs.com/docs/reference/api/ui/virtual-list)

Status: stable. Packages: @askrjs/ui/virtual-list.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 9 exports from the declarations shipped by @askrjs/ui.

### `VirtualList`

```ts
VirtualList: { <Item>(props: VirtualListProps<Item>): JSX.Element; <Item>(props: VirtualListAsChildProps<Item>): JSX.Element; }
```

Renders a part of `virtual-list`.

Supports polymorphic rendering via `asChild`.

### `VirtualListApi`

```ts
VirtualListApi: {
  scrollToIndex: (index: number, alignment?: VirtualScrollAlignment) => void;
  scrollToTop: () => void;
  scrollToBottom: () => void;
  getState: () => VirtualListState;
  getVisibleRange: () => VirtualRange;
  getItemCount: () => number;
  getScrollTop: () => number;
  isAtTop: () => boolean;
  isAtBottom: () => boolean;
  isFollowingBottom: () => boolean;
  getPendingUnseenCount: () => number;
  setFollowBottom: (followBottom: boolean) => void;
}
```

Virtual List Api.

### `VirtualListAsChildProps`

```ts
VirtualListAsChildProps: Omit<VirtualListRootProps, 'children'> & {
  items: readonly Item[];
  rowHeight: number;
  overscan?: VirtualOverscan;
  getKey: (item: Item, index: number) => string | number;
  rowComponent: VirtualListRowComponent<Item>;
  followBottom?: boolean | {
    threshold?: number;
  };
  onScroll?: (event: Event) => void;
  viewport?: VirtualListViewport;
  apiRef?: Ref<VirtualListApi<Item> | null>;
  ref?: Ref<HTMLElement>;
  asChild: true;
  children: JSXElement;
}
```

Props for the `asChild` (polymorphic) rendering of Virtual List.

- `apiRef`: apiRef?: Ref<VirtualListApi<Item> | null>;

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `followBottom`: followBottom?: boolean | { threshold?: number; } | undefined;

- `getKey`: getKey: (item: Item, index: number) => string | number;

- `items`: items: readonly Item[];

- `onScroll`: onScroll?: ((event: Event) => void) | undefined;

- `overscan`: overscan?: VirtualOverscan | undefined;

- `ref`: ref?: Ref<HTMLElement>;

- `rowComponent`: rowComponent: VirtualListRowComponent<Item>;

- `rowHeight`: rowHeight: number;

- `viewport`: viewport?: "lg" | undefined;

### `VirtualListProps`

```ts
VirtualListProps: VirtualListRootProps & {
  items: readonly Item[];
  rowHeight: number;
  overscan?: VirtualOverscan;
  getKey: (item: Item, index: number) => string | number;
  rowComponent: VirtualListRowComponent<Item>;
  followBottom?: boolean | {
    threshold?: number;
  };
  onScroll?: (event: Event) => void;
  viewport?: VirtualListViewport;
  apiRef?: Ref<VirtualListApi<Item> | null>;
  ref?: Ref<HTMLElement>;
  asChild?: false;
}
```

Props for Virtual List.

- `apiRef`: apiRef?: Ref<VirtualListApi<Item> | null>;

- `asChild`: asChild?: false | undefined;

- `followBottom`: followBottom?: boolean | { threshold?: number; } | undefined;

- `getKey`: getKey: (item: Item, index: number) => string | number;

- `items`: items: readonly Item[];

- `onScroll`: onScroll?: ((event: Event) => void) | undefined;

- `overscan`: overscan?: VirtualOverscan | undefined;

- `ref`: ref?: Ref<HTMLElement>;

- `rowComponent`: rowComponent: VirtualListRowComponent<Item>;

- `rowHeight`: rowHeight: number;

- `viewport`: viewport?: "lg" | undefined;

### `VirtualListRowComponent`

```ts
VirtualListRowComponent: (props: VirtualListRowComponentProps<Item>) => VirtualListRowElement | null
```

Virtual List Row Component.

### `VirtualListRowComponentProps`

```ts
VirtualListRowComponentProps: {
  item: Item;
  index: number;
  rowKey: string;
  isVisible: boolean;
}
```

Props for Virtual List Row Component.

- `index`: index: number;

- `isVisible`: isVisible: boolean;

- `item`: item: Item;

- `rowKey`: rowKey: string;

### `VirtualListRowElement`

```ts
VirtualListRowElement: JSXElement | JSX.Element
```

Virtual List Row Element.

### `VirtualListState`

```ts
VirtualListState: {
  count: number;
  scrollTop: number;
  viewportHeight: number;
  totalHeight: number;
  visibleRange: VirtualRange;
  isAtTop: boolean;
  isAtBottom: boolean;
  followBottom: boolean;
  pendingUnseenCount: number;
}
```

Virtual List State.

### `VirtualListViewport`

```ts
VirtualListViewport: 'lg'
```

Virtual List Viewport.

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/table/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/virtual-table/index.md)