React-variable-height-infinite-scroller NPM

react-variable-height-infinite-scroller

An infinite scroller especially made for variable row heights (no precomputation of row height necessary).

See a Demo

Why

Because sometimes you don't know the size of the rows you're going to render before rendering

Install:

npm i --save react-variable-height-infinite-scroller

Usage:

<InfiniteScroller
  averageElementHeight={100} // this is a guess you make!
  containerHeight={600}
  rowToJumpTo={rowToJumpTo} // (optional) set this if you want to start/jump to a a particular row. Must be passed as a new object each time to allow for difference checking
  renderRow={renderRow} // function to render a row
  totalNumberOfRows={fakeRows.length} // an array of data for your rows
/>

Props

Name	Default	Description
containerHeight `number`	required	Maximum height of the scroll container
totalNumberOfRows `number`	required	Length of the data array
renderRow `function`	required	Function to render a row
averageElementHeight `number`	(optional) 100	This is a guess you make of what the average row height will be height. This is used to approximate how far to move the scrollbar
rowToJumpTo	(optional) 0	Object of shape `{ row: Number }`. Row you want to start with or jump to. Must be passed as a new object each time to allow for difference checking
jumpToBottomOfRow `boolean`	(optional) false	By default jumping to a row jumps to the top. Set to true if you want to jump to the bottom of the row
containerClassName `string`	(optional) infiniteContainer	className to apply on container
onScroll `function`	(optional) no-op	Hook to call on scroll

Methods

Name	Description
scrollTo	Alternate way to jump to a particular row. Usage below.

scrollTo usage*:

class MyComponent extends Component {
  scrollSomewhere() {
    this.list.scrollTo(Math.floor(Math.random() * 100));
  }

  render() {
    return (
      <div>
        Here is my list:
        <InfiniteScroller length={100} itemRenderer={...} ref={c => this.list = c} />
        <button onClick={::this.scrollSomewhere}>Scroll Somewhere</button>
      </div>
    );
  }
}

Taken from the demo code:

import React from 'react';
import InfiniteScroller from './InfiniteScroller.js';

function getFakeRowsWithHeights(numberOfRows) {
  let newFakeRows = [];
  for (let i = 0; i < numberOfRows; i++) {
    newFakeRows.push({height: Math.floor(1000 * Math.random())});
  }
  return newFakeRows;
}

const Example1 = React.createClass({
  getNewRandomRow(totalRows) {
    return {row: Math.floor(totalRows * Math.random())};
  },

  getInitialState() {
    const newNumberOfRowsToDisplay = Math.floor(Math.random() * 200);
    const newFakeRows = getFakeRowsWithHeights(newNumberOfRowsToDisplay);
    return {
      rowToJumpTo: null,
      newRowToJumpTo: this.getNewRandomRow(newFakeRows.length),
      fakeRows: newFakeRows,
    };
  },
  render() {
    const newNumberOfRowsToDisplay = Math.floor(Math.random() * 200);
    return (
      <div style={{width: 300}} overflow="scroll">
        <h3>
        Example 1: Random number of rows and row heights
        </h3>
        <button onClick={() => {
          this.setState({
            rowToJumpTo: this.state.newRowToJumpTo,
            newRowToJumpTo: this.getNewRandomRow(this.state.fakeRows.length),
          });
        }}>
          Jump to a random row: Row #{this.state.newRowToJumpTo.row} (its height is {this.state.fakeRows[this.state.newRowToJumpTo.row].height})
        </button>
        <button onClick={() => {
          const newFakeRows = getFakeRowsWithHeights(newNumberOfRowsToDisplay);
          this.setState({
            fakeRows: newFakeRows,
            newRowToJumpTo: this.getNewRandomRow(newFakeRows.length),
          });
        }}>
          Create {newNumberOfRowsToDisplay} new rows
        </button>

        <InfiniteScroller
          averageElementHeight={100} // this is a guess you make!
          containerHeight={600}
          rowToJumpTo={this.state.rowToJumpTo} // (optional) set this if you want to start/jump to a a particular row. Must be passed as a new object each time to allow for difference checking
          renderRow={this.renderRow} // function to render a row
          totalNumberOfRows={this.state.fakeRows.length} // an array of data for your rows
        />
      </div>
    );
  },

  renderRow(rowNumber) {
    const heightOfRow = this.state.fakeRows[rowNumber].height;
    return (
      <div
        key={rowNumber}
        style={{height: heightOfRow, background: rowNumber % 2 === 0 ? 'red' : 'orange'}}
      >
        Height: {heightOfRow}
        <br/>
        Row Number: {rowNumber}
      </div>
    );
  },
});

React.render(<Example1 />, document.getElementById('container'));