@rc-component/virtual-list

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

Similar packages

Other packages similar to @rc-component/virtual-list

react-virtualized

react-virtualized is a popular library for efficiently rendering large lists and tabular data. It offers a wide range of components for different use cases, such as grids and tables, in addition to lists. Compared to @rc-component/virtual-list, react-virtualized provides more components and customization options but may have a steeper learning curve.

react-window

react-window is a lightweight library for rendering large lists and tabular data. It is similar to react-virtualized but focuses on simplicity and performance. It offers a smaller API surface and is easier to use for basic use cases compared to @rc-component/virtual-list, which might offer more specific features for virtual lists.

react-infinite-scroller

react-infinite-scroller is a library that provides infinite scrolling capabilities for React components. It is less focused on virtualized rendering and more on loading additional data as the user scrolls. It can be used in conjunction with virtual list components like @rc-component/virtual-list to handle dynamic data loading.