React Virtual List Component which works with animation.
NPM version npm download build status Codecov bundle size dumi
https://virtual-list-react-component.vercel.app/
npm install npm start open http://localhost:8000/
- Support react.js
- Support animation
- Support IE11+
import List from '@rc-component/virtual-list'; <List data={[0, 1, 2]} height={200} itemHeight={30} itemKey="id"> {(index) => <div>{index}</div>} </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.