@rc-component/virtual-list

React Virtual List Component which works 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-component/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.

Current Tags

1.0.2 ... latest (4 months ago)

3 Versions

1.0.2 ... 4 months ago
1.0.1 ... 4 months ago
1.0.0 ... 4 months ago