List

The most basic list display, which can carry text/pictures/paragraphs, and is often used in the data display page.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

• Basic: List can carry text, pictures, and paragraphs, and is often used to display data.
• Size: There are three sizes (small default large) that you can select according to your need.
• With Meta: Use List.Item.Meta to quickly specify avatar, title, and text.
• With Actions: Use actions to add operation items to the list.
• Vertical List: This is an example including paging, content on the right, and list operations.
• Grid List: Use grid.span to set the number of columns expected to occupy.
• Responsive List Grid: Dynamically set the number of columns occupied by each item through parameters such as grid.sm. Be careful not to set grid.span at this time.
• Scroll Loading: You can set onReachBottom to dynamically loading data when the list is scrolling. If onReachBottom cannot meet the requirements, you can customize the list scrolling monitor function through onListScroll, at this time the default monitor function will be invalid.
• Infinite List: By specifying virtualListProps to turn on the virtual list, high performance can be obtained when a large amount of data is used. When using a virtual list, if the height of the list items varies greatly, it may cause blank space in the viewport when scrolling, which can be solved by setting virtualListProps.itemHeight. itemHeight is used to calculate the actual number of DOM nodes that need to be rendered (viewportHeight / itemHeight). The smaller the value, the more DOM nodes actually rendered, and the performance overhead will increase. Because the virtual list uses the ref of ListItem internally, if you return a custom function component through render, please use React.forwardRef to wrap it.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

List

List.Item

List.Item.Meta

ListGridProps

type ListGridProps = {
  column?: number;
} & Pick<RowProps, "gutter" | "justify" | "align"> &
  Pick<
    ColProps,
    "span" | "offset" | "order" | "pull" | "push" | GridResponsiveBreakpoint
  >;

ListHandle

export type ListHandle = {
  dom: HTMLDivElement;
  scrollIntoView: (index: number) => void;
};

AvailableVirtualListProps

export type AvailableVirtualListProps = Pick<
  VirtualListProps<any>,
  | "height"
  | "itemHeight"
  | "threshold"
  | "isStaticItemHeight"
  | "scrollOptions"
  | "onScroll"
  | "wrapperChild"
>;

<ListGridProps>

VirtualListProps