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'));

Contributing

Changelog is now autogenerated. So commits have to be prefixed by one the four following prefixes to get added to the changelog:

• [added] added a new feature
• [changed] changed an existing feature
• [fixed] fixed a bug
• [removed] removed something or a file

Run npm test to lint

#Changelog: Changelog

*(taken from "react-list")