@rc-component/listy

_{Part of the Ant Design ecosystem.}

📜 Virtualized React list component with grouping and sticky header support.

## Highlights | Area | Support | | --- | --- | | Purpose | Virtualized React list component with grouping and sticky header support. | | Package | `@rc-component/listy` | | Release | `@rc-component/np` / `rc-np` | ## Install ```bash npm install @rc-component/listy ``` ## Usage ```tsx | pure import Listy from '@rc-component/listy'; import '@rc-component/listy/assets/index.css'; const items = Array.from({ length: 100 }, (_, index) => ({ id: index, name: `Item ${index}` })); export default () => (

{item.name}

} /> ); ``` ## API | Prop | Description | Type | Default | | --- | --- | --- | --- | | `items` | List data source. | `T[]` | `[]` | | `rowKey` | Resolve item identity. | `keyof T \| (item: T, index: number) => React.Key` | required | | `itemRender` | Render each item. | `(item: T, index: number) => React.ReactNode` | required | | `height` | Viewport height. | `number` | - | | `itemHeight` | Estimated item height. | `number` | - | | `group` | Group configuration. | `{ key: (item: T) => K; title: (groupKey: K, items: T[]) => React.ReactNode }` | - | | `sticky` | Enable sticky group headers. | `boolean` | `false` | | `virtual` | Enable virtual scrolling. | `boolean` | `true` | | `scrollWidth` | Real content width. Only takes effect when `virtual` is enabled; a horizontal scrollbar shows up once set. | `number` | - | | `direction` | Layout direction; set `rtl` for right-to-left. | `'ltr' \| 'rtl'` | `'ltr'` | | `onScroll` | Triggered when the inner scroll container scrolls. | `React.UIEventHandler` | - | | `prefixCls` | Component class name prefix. | `string` | `rc-listy` | ### ListyRef | Method | Description | | --- | --- | | `scrollTo(config)` | Scroll to a position, item key, or group key. | ## Development ```bash npm install npm start npm test npm run lint npm run compile ``` The dumi site runs at `http://localhost:8000`. ## Release ```bash npm run prepublishOnly ``` The release flow is handled by `@rc-component/np` through the `rc-np` command when the package uses the shared release flow. ## License @rc-component/listy is released under the [MIT](./LICENSE) license.