Skip to content

react-component/virtual-list

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jan 3, 2025
10ca51d Â· Jan 3, 2025
Aug 18, 2024
Sep 20, 2024
Nov 5, 2024
Jan 3, 2025
Dec 4, 2024
Oct 15, 2020
Feb 1, 2024
Aug 18, 2024
Mar 5, 2020
Feb 1, 2024
Jan 4, 2024
Sep 22, 2023
Aug 18, 2024
Feb 1, 2024
Jan 3, 2025
Feb 1, 2024
Apr 9, 2021

Repository files navigation

rc-virtual-list

React Virtual List Component which worked with animation.

NPM version dumi build status Test coverage node version npm download

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

rc-virtual-list

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.