rc-virtual-list

React Virtual List Component

🌟 Show real-time usage chart on rc-virtual-list's README.md, just copy the code below.

## Usage Trend
[![Usage Trend of rc-virtual-list](https://npm-compare.com/img/npm-trend/THREE_YEARS/rc-virtual-list.png)](https://npm-compare.com/rc-virtual-list#timeRange=THREE_YEARS)

🌟 Show GitHub stars trend chart on rc-virtual-list's README.md, just copy the code below.

## GitHub Stars Trend
[![GitHub Stars Trend of rc-virtual-list](https://npm-compare.com/img/github-trend/rc-virtual-list.png)](https://npm-compare.com/rc-virtual-list)

Package	Downloads	Stars	Size	Issues	Publish	License

rc-virtual-list	1,693,111	797	148 kB	77	2 months ago	MIT

rc-virtual-list

React Virtual List Component which worked with animation.

Online Preview

https://virtual-list-react-component.vercel.app/

Development

npm install
npm start
open http://localhost:8000/

Feature

Support react.js
Support animation
Support IE11+

Install

Usage

import List from 'rc-virtual-list';

<List data={[0, 1, 2]} height={200} itemHeight={30} itemKey="id">
  {index => <div>{index}</div>}
</List>;

API

List

| Prop | Description | Type | Default | | ---------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | children | Render props of item | (item, index, props) => ReactElement | - | | component | Customize List dom element | string | Component | div | | data | Data list | Array | - | | disabled | Disable scroll check. Usually used on animation control | boolean | false | | height | List height | number | - | | itemHeight | Item minimum height | number | - | | itemKey | Match key with item | string | - | | styles | style | { horizontalScrollBar?: React.CSSProperties; horizontalScrollBarThumb?: React.CSSProperties; verticalScrollBar?: React.CSSProperties; verticalScrollBarThumb?: React.CSSProperties; } | - |

children provides additional props argument to support IE 11 scroll shaking. It will set style to visibility: hidden when measuring. You can ignore this if no requirement on IE.