ReferenceComponentsVirtual list
VirtualListProps
VirtualListProps component contract.
Type
export interface VirtualListProps<TItem>
extends CommonComponentProps,
SlottedComponentProps<
VirtualListSlots,
{
readonly focused: boolean;
readonly activeIndex: number;
readonly offset: number;
}
> {
readonly items: readonly TItem[];
readonly renderItem: (
item: TItem,
context: VirtualListRenderContext,
) => ReactNode;
readonly getItemKey: (item: TItem, index: number) => string;
readonly getItemLabel?: (item: TItem, index: number) => string;
readonly height?: number;
readonly overscan?: number;
readonly offset?: number;
readonly defaultOffset?: number;
readonly onOffsetChange?: (offset: number) => void | Promise<void>;
readonly activeIndex?: number;
readonly defaultActiveIndex?: number;
readonly onActiveIndexChange?: (index: number) => void | Promise<void>;
readonly onSelect?: (item: TItem, index: number) => void | Promise<void>;
readonly emptyMessage?: string;
readonly staticLimit?: number;
readonly autoFocus?: boolean;
}Members
| Member | Type | Required | Description | Related types |
|---|---|---|---|---|
items | readonly TItem[] | Yes | The items member uses the readonly TItem[] contract. | — |
renderItem | (item: TItem, context: VirtualListRenderContext) => ReactNode | Yes | The renderItem member uses the (item: TItem, context: VirtualListRenderContext) => ReactNode contract. | — |
getItemKey | (item: TItem, index: number) => string | Yes | The getItemKey member uses the (item: TItem, index: number) => string contract. | — |
getItemLabel | ((item: TItem, index: number) => string) | undefined | No | The getItemLabel member uses the ((item: TItem, index: number) => string) | undefined contract. | — |
height | number | undefined | No | The height member uses the number | undefined contract. | — |
overscan | number | undefined | No | The overscan member uses the number | undefined contract. | — |
offset | number | undefined | No | The offset member uses the number | undefined contract. | — |
defaultOffset | number | undefined | No | The defaultOffset member uses the number | undefined contract. | — |
onOffsetChange | ((offset: number) => void | Promise<void>) | undefined | No | The onOffsetChange member uses the ((offset: number) => void | Promise<void>) | undefined contract. | — |
activeIndex | number | undefined | No | The activeIndex member uses the number | undefined contract. | — |
defaultActiveIndex | number | undefined | No | The defaultActiveIndex member uses the number | undefined contract. | — |
onActiveIndexChange | ((index: number) => void | Promise<void>) | undefined | No | The onActiveIndexChange member uses the ((index: number) => void | Promise<void>) | undefined contract. | — |
onSelect | ((item: TItem, index: number) => void | Promise<void>) | undefined | No | The onSelect member uses the ((item: TItem, index: number) => void | Promise<void>) | undefined contract. | — |
emptyMessage | string | undefined | No | The emptyMessage member uses the string | undefined contract. | — |
staticLimit | number | undefined | No | The staticLimit member uses the number | undefined contract. | — |
autoFocus | boolean | undefined | No | The autoFocus member uses the boolean | undefined contract. | — |
variant | string | undefined | No | The variant member uses the string | undefined contract. | — |
size | "sm" | "md" | "lg" | undefined | No | The size member uses the "sm" | "md" | "lg" | undefined contract. | — |
unstyled | boolean | undefined | No | The unstyled member uses the boolean | undefined contract. | — |
className | string | undefined | No | The className member uses the string | undefined contract. | — |
layout | Partial<Omit<LayoutNodeInput, "children" | "id" | "semantics">> | undefined | No | The layout member uses the Partial<Omit<LayoutNodeInput, "children" | "id" | "semantics">> | undefined contract. | — |
id | string | undefined | No | The id member uses the string | undefined contract. | — |
testId | string | undefined | No | The testId member uses the string | undefined contract. | — |
role | SemanticRole | undefined | No | The role member uses the SemanticRole | undefined contract. | SemanticRole |
label | string | undefined | No | The label member uses the string | undefined contract. | — |
description | string | undefined | No | The description member uses the string | undefined contract. | — |
disabled | boolean | undefined | No | The disabled member uses the boolean | undefined contract. | — |
readOnly | boolean | undefined | No | The readOnly member uses the boolean | undefined contract. | — |
selected | boolean | undefined | No | The selected member uses the boolean | undefined contract. | — |
checked | boolean | undefined | No | The checked member uses the boolean | undefined contract. | — |
expanded | boolean | undefined | No | The expanded member uses the boolean | undefined contract. | — |
valueText | string | undefined | No | The valueText member uses the string | undefined contract. | — |
slots | Partial<SlotComponents<{ root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; overflow: import("ink").TextProps; empty: import("ink").TextProps; }>> | undefined | No | The slots member uses the Partial<SlotComponents<{ root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; overflow: import("ink").TextProps; empty: import("ink").TextProps; }>> | undefined contract. | BoxProps, SlotComponents, TextProps |
slotProps | Partial<SlotProps<{ root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; overflow: import("ink").TextProps; empty: import("ink").TextProps; }, { readonly focused: boolean; readonly activeIndex: number; readonly offset: number; }>> | undefined | No | The slotProps member uses the Partial<SlotProps<{ root: import("ink").BoxProps; viewport: import("ink").BoxProps; item: import("ink").TextProps; overflow: import("ink").TextProps; empty: import("ink").TextProps; }, { readonly focused: boolean; readonly activeIndex: number; readonly offset: number; }>> | undefined contract. | BoxProps, SlotProps, TextProps |