React-Virtual-List
A React Virtual List for dynamic item height based Intersection API
Install
pnpm i react-predict-virtualPreview
pnpm exampleBuild
pnpm buildUsage
| props | description | type |
|---|---|---|
itemCount |
required，the count of items | number |
itemHeight |
required，the min height of item | number |
dividedAreaNum |
默认是 10，每一层的数据被划分为多少个区块 | number |
useDynamicHeight |
不是必填，默认 false，是否使用动态计算高度 | boolean |
factors |
不是必填，用于描述数据的特征向量 | number[] |
version |
不是必填，version 变化，会清空原有的数据，假如 factors 的含义变了，想重置数据库，可以改这个 |
number |
Example
with fixed height
<VirtualList dividedAreaNum={10} itemCount={arrayLength} itemHeight={40}>
{
(props: any) => <div />{props.index} </div>
}
</VirtualList>with dynamic height
import VirtualList, { ChildItemProps } from 'react-predict-virtual'
import createPredictWorker from 'react-predict-virtual/createPredictWorker'
const arrayLength = 1000
const originalList = new Array(arrayLength).fill(0).map(i => {
return {
memo: str.slice(Math.floor(Math.random() * str.length)),
images: new Array(Math.floor(Math.random() * 12)).fill(0)
}
})
function App() {
const factors = originalList.map(i => {
return [i.memo.length, i.images.length]
})
return (
<div>
<VirtualList
dividedAreaNum={10}
itemCount={arrayLength}
itemHeight={40}
createPredictWorker={createPredictWorker}
>
{
(props: ChildItemProps) => <ListItem index={props.index} />
}
</VirtualList>
</div>
)
}