/react-dynamic-virtual-scroll

Virtual scroll implemetation for dynamic row height

Primary LanguageJavaScriptMIT LicenseMIT

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.