virtual-list-down-up

⚡ A high speed react component for virtual list with pull-up loading and pull-down loading.

Install

npm i virtual-list-down-up

Demo

Live Demo

Use

import { VariableSizeList as List } from 'virtual-list-down-up';

const Row = ({ item, index }) => <div key={index}>{item}</div>;

const Example = () => (
  <List
    listData={listData}
    estimatedItemSize={90}
  >
    {Row}
  </List>
);

You need to pass in two required parameters：

• listData： List data
• estimatedItemSize：Estimated height of each row of the list. If you don't know how high each row is, whether this height is accurate or not is not important and does not affect the rendering of the virtual list. If you still hesitate to set the appropriate height, then set the minimum height

Other Props

| Name | Description | | :-----------------------------------------: | :-------------------------: | | listData | List data | estimatedItemSize | Estimated height of each row of the list | bufferScale | Buffer height ratio | pullDownCallback | Pull down refresh callback | pullUpCallback | Pull up refresh callback | hasMoreTopData | Pull down refresh to see if there is more data | hasMoreBottomData | Pull up refresh to see if there is more data | loaderAtTop | Custom loading component at the top | loaderAtBottom | Custom loading component at the bottom

Features

• Real virtual scrolling 😍.
• Row supports variable heights 🎉.
• Supports loading more 🔥.
• Supports pull down to load more 🌐.
• Supports pull up to load more 😍.
• Responsive component.
• Simple configuration, ready to use out of the box.
• Thorough documentation .
• High speed .