@rc-component/Listy

React Listy Component

Install

Usage

Include the default styling and then:

import React from 'react';
import ReactDOM from 'react-dom/client';
import Listy from '@rc-component/listy';

const items = Array.from({ length: 100 }, (_, index) => ({
  id: index,
  name: `Item ${index}`,
}));

const App = () => (
  <Listy
    items={items}
    height={240}
    itemHeight={32}
    rowKey="id"
    itemRender={(item) => <div>{item.name}</div>}
  />
);

ReactDOM.createRoot(container).render(<App />);

Compatibility

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Example

http://localhost:9001

Development

npm install
npm start

API

props

name	type	default	description
items	T[]	[]	列表数据源，虚拟滚动会基于此计算高度。
rowKey	keyof T | (item: T) => React.Key	required	返回每一项的唯一标识，用于缓存高度与滚动定位。
itemRender	(item: T, index: number) => React.ReactNode	required	渲染单行内容的函数。
height	number	-	列表可视区域高度。
itemHeight	number	-	每行的基础高度，虚拟滚动会以此做初始估算。
group	{ key: ((item: T) => K) | K; title: (groupKey: K, items: T[]) => React.ReactNode }	-	提供分组 key 与标题渲染，开启后会生成组头。
sticky	boolean	false	为分组头启用粘性悬停效果。
virtual	boolean	true	是否启用虚拟列表模式，可根据需要关闭。
onScroll	React.UIEventHandler<HTMLElement>	-	滚动时触发，透传内部滚动容器的滚动事件。
prefixCls	string	rc-listy	组件样式前缀，方便自定义样式隔离。

ListyRef

• scrollTo(config: number | { key?: React.Key; index?: number; align?: 'top' | 'bottom' | 'auto'; offset?: number; } | { groupKey: React.Key; align?: 'top' | 'bottom' | 'auto'; offset?: number; })
  • 传入 groupKey 时会直接滚动到对应组头（需启用 group）

Test Case

npm test
npm run coverage

open coverage/ dir

License

@rc-component/listy is released under the MIT license.