rc-virtual-list

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:8000/

Feature

• Support react.js
• Support animation
• Support IE11+

Install

Usage

import List from 'rc-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-virtual-list

react-window

React-window is a similar package that provides components for efficiently rendering large lists and tabular data. It is similar to rc-virtual-list but offers a different API and additional features like variable item sizes and direction support (horizontal/vertical).

react-virtualized

React-virtualized is another package that offers a set of components for efficiently rendering large lists, grids, and tables. It is more feature-rich than rc-virtual-list, providing features like cell measuring and window scroller integration, but it may be heavier in terms of bundle size.

virtuoso

Virtuoso is a React virtual list component with a different set of features, including automatic item size measurements, group headers, and end-to-end list buffering. It provides a more out-of-the-box experience compared to rc-virtual-list, which is more low-level and customizable.