react-progressive-list-typescript

This is a fork to the original [react-progressive-list](https://www.npmjs.com/package/react-progressive-list) library but with some added features:

• written in typescript
• added a scrollBuffer so that you can start loading the next items before the end is reached

Read the blog post

React Progressive List is an alternative to React Virtualized. It wins in two possible scenarios:

• Your list rows are complex and slow to render. react-virtualized cannot render new rows fast enough to maintain a smooth 60fps scroll.
• You've tried react-virtualized and found it to be overly complicated for your basic needs.

Demo

Demo Site

Install

yarn add react-progressive-list-typescript

Example

  renderRow = index => {
    return <Row key={index} avatar={avatars[index]} name={names[index]} />;
  }

  render() {
    return (
      <ReactProgressiveList
        initialAmount={40}
        progressiveAmount={20}
        renderItem={this.renderRow}
        renderLoader={() => <Spinner />}
        rowCount={400}
        scrollBuffer={20}
        useWindowScroll
      />
    );
  }

Props

Property	Type	Default	Description
className	string	undefined	className to apply to the parent div
initialAmount	number	10	initial number of rows to display
progressiveAmount	number	10	number of rows to render each time a new batch is requested
idleAmount	number	0	number of rows to render when the browser is idle (limited browser support for requestIdleCallback)
isActive	boolean	true	setting to false will render the full list without any progressive loading
renderItem	(index: number) => React.Node	required	function that returns the row to render
renderLoader	() => React.Node	() => null	function that returns a loader to render
rowCount	number	required	the length of your list
useWindowScroll	boolean	false	When true will use a scroll listener on the window, otherwise will use a scroll listener on the parent
scrollBuffer	number	0	How many pixels before the end is reached, should we start loading more items