rc-virtual-list
v3.16.1
Published
React Virtual List Component
Downloads
6,220,275
Readme
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:9001/
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 minium 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.