react-list-any-height
React scroll list for item with any height.
Example: https://wangtao0101.github.io/react-list-any-height/
Motivation
react virtualized and react-infinite can only handle list with fixed height, but that may not always be the case.
Install
npm install react-list-any-height --save
yarn add react-list-any-height
Basic Use
Elements of Any Height
As we don't know the height of all row before the row had been rendered, we figure out the height of contianer by using minRowHeight.
<AnyHeight
dataSource={dataSource}
minRowHeight={100}
rowRender={(index, style) => (
<div className="hover-row" style={style)}></div>
)}
/>
How to work
We figure out the origin height of contianer by using minRowHeight. After you scroll and the more row will be rendered, we using new heights to update component in next scrolling.
Note on Smooth Scrolling
minRowHeight should be set reasonable, otherwise if you scroll to end fastly and then you scroll to up slowly, then page will jump.
Api
dataSource
the data array, isRequired
minRowHeight
The minimum height of all rows, isRequired
height
The height of scrolling contianer, default to 300.
preloadBatchSize
The items rendered out of contianer, default to 5.
style
The style of contianer, default to style: { width: '100%' }.
rowStyle
The style of row
rowRender
A function for rendering a row, isRequired
timeScrollStateLastsForAfterUserScrolls(same as react-infinite)
Defaults to 150 (in milliseconds). On Apple and some other devices, scroll is inertial. This means that the window continues to scroll for several hundred milliseconds after an onScroll event is fired. To prevent janky behavior, we do not want pointer-events to reactivate before the window has finished moving. Setting this parameter causes the Infinite component to think that the user is still scrolling for the specified number of milliseconds after the last onScroll event is received.
Thanks
Some code from react-infinite
Roadmap
- full test
- Using the Window to Scroll