README.md

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]} containerSize={200} itemSize={30} itemKey="id">
  {index => <div>{index}</div>}
</List>;

API

List

Prop	Description	Type	Default
prefixCls	prefix of list element and children class	string	rc-virtual-list
className	wrapper className of list element	string	-
style	wrapper style of list element	React.CSSProperties	-
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
containerSize	List width or height. If string is passed, it's must be a valid size or it's parent has a valid size	number | string	-
isStaticItem	Whether width or height of item is fixed. The itemSize properity is required when It set to true	boolean	false
itemSize	Item minium width or height. It's required when item is fixed size or you want to enable virtual mode	number	-
itemKey	Match key with item	string | (<T>(item: T) => React.Key)	-
direction	list direction: IDirection.Horizontal or IDirection.Vertical	IDirection	IDirection.Vertical
isFullSize	always enable container size even if children's size not reach	boolean	true
isEnableVirtual	enable or disable virtual mode. The properity containerSize and itemSize is required to enable virtual list mode	boolean	false
onScroll	callback when list is scroll	React.UIEventHandler<React.HTMLElement>	-
onVisibleChange	trigger when render list item changed	(visibleList: T[], fullList: T[]) => void	-
innerProps	Inject to inner container props. Only use when you need pass aria related data	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.