react-windowed-list

A fast, versatile virtual-render list component for React.

This component was originally forked from ReactList, so credit for the core functionality goes to orgsync. I have re-architected it to be more modular, fixed some of the rendering issues, added additional options, and added code coverage.

If you are migrating from ReactList, the following props have changed names:

* itemsRenderer => containerRenderer
* itemSizeEstimator => getEstimatedItemSize
* itemSizeGetter => getItemSize
* scrollParentGetter => getScrollParent

* Usage
* Available props
* axis
* containerRenderer
* debounceReconciler
* getEstimatedItemSize
* getItemSize
* getScrollParent
* initialIndex
* isHidden
* isLazy
* itemRenderer
* length
* minSize
* pageSize
* threshold
* type
* usePosition
* useTranslate3d
* Instance methods
* getVisibleRange
* scrollAround
* scrollTo
* FAQ
* Development

Usage

``javascript import React, { PureComponent } from "react"; import WindowedList from "react-windowed-list";

const CONTAINER_STYLE = { height: 500, overflow: "auto" };

class MyComponent extends PureComponent { renderItem = (index, key) => { return (

I am rendering stuff for the item at index {index}!


    );
  };
  render() {
    const { items } = this.props;
    return (
      

        List example
        

                      itemRenderer={this.renderItem}
            length={items.length}
            type="uniform"
          />
        

      

    );
  }
}

The version you install from npm includes both the library as you would use in a bundler (such as webpack) as well as the compiled file you would use in a

react-windowed-list

react-windowed-list

Table of contents

Usage

List example