Package Exports

@rc-component/virtual-list
@rc-component/virtual-list/es/index.js
@rc-component/virtual-list/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rc-component/virtual-list) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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.