rc-virtual-list

What is rc-virtual-list?

The rc-virtual-list npm package is a React component for efficiently rendering large lists and tabular data. It only renders the items that are currently visible in the viewport, which helps in improving the performance of the application by reducing the number of DOM nodes.

What are rc-virtual-list's main functionalities?

Basic Virtual List

This code sample demonstrates how to create a basic virtual list with fixed item height. The 'data' prop is an array of items to display, 'height' sets the height of the list, 'itemHeight' is the height of each item, and 'itemKey' is a unique key for each item.

import VirtualList from 'rc-virtual-list';

<VirtualList
  data={data}
  height={200}
  itemHeight={20}
  itemKey='id'
>{(item) => <div>{item.name}</div>}</VirtualList>

Dynamic Item Height

This code sample shows how to handle dynamic item heights. The 'style' parameter is used to apply necessary styles for positioning items in the virtual list.

import VirtualList from 'rc-virtual-list';

<VirtualList
  data={data}
  height={200}
  itemKey='id'
>{(item, index, style) => (
  <div style={style}>{item.name}</div>
)}</VirtualList>

Custom Scrollbar

This example illustrates how to integrate a custom scrollbar component into the virtual list. The 'components' prop allows you to replace the default scrollbar with a custom one.

import VirtualList from 'rc-virtual-list';
import CustomScrollbar from 'custom-scrollbar-component';

<VirtualList
  data={data}
  height={200}
  itemHeight={20}
  itemKey='id'
  components={{
    scrollbar: CustomScrollbar
  }}
>{(item) => <div>{item.name}</div>}</VirtualList>

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.

README

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]} 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 minium 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.