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-scroll

No 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. |