react-dynamic-virtual-scroll
React component available to implement virtual-scroll at any page without worrying about the dynamic item height.
You can play with the library over here: Codesandbox
Installation
npm install react-dynamic-virtual-scrollNo external dependencies so no need to worry about security and package size.
Usage
-
Import component.
import VirtualScroll from "react-dynamic-virtual-scroll";
-
Add component as follows in your render method:
<VirtualScroll className="List" minItemHeight={40} totalLength={100} renderItem={(rowIndex) => { return ( <div className="List-item"> <h3>List item: {rowIndex}</h3> </div> ); }} />
Props Table
| name | type | required | default | description |
|---|---|---|---|---|
| minItemHeight | number | true | Minimum item height to calculate the placeholder spacing. | |
| totalLength | number | true | Total number of items to be rendered. | |
| renderItem | (rowIndex) => React.ReactNode | true | Callback to render items for specified index values. 0-indexed | |
| length | number | 30 | Total number of items to be rendered in the dom. | |
| buffer | number | 10 | Total number of items to be rendered in the dom before and after your required dom items. |