ReactJS Component for Displaying infinite List of Elements with Arbitrary Height

react-infinite-any-height

react-infinite with automatic height calculation.

Try it - Live Example

Install

npm install react-infinite-any-height (peer dependencies: react)

Demo

Check out Live Example, or run locally

git clone git@github.com:Radivarig/react-infinite-any-height.git
npm install
npm run dev

navigate to localhost:8080

Usage

// ...
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import InfiniteAnyHeight from 'react-infinite-any-height';

class App extends Component {
  constructor() {
    super();

    const list = new Array(10000).fill('').map((x, i) => {
      const height = 100 + Math.round(Math.abs((Math.sin(i) * 250)));
      const style = { height, border: 'solid 1px', backgroundColor: `#${height}` };
      return (
        <div key={i} style={style}>
          Height: { height + 2 }
          <div style={{ textAlign: 'center', color: 'white' }}>
            Item: {i}
          </div>
        </div>
      );
    });

    this.state = { list };
  }

  render() {
    return (
      <InfiniteAnyHeight
        list={this.state.list}
        preloadAdditionalHeight={window.innerHeight*2}
        useWindowAsScrollContainer
      />
    );
  }
}

var elemDiv = document.createElement('div')
document.body.appendChild(elemDiv)
ReactDOM.render(<App/>, elemDiv)

All props are passed to react-infinite as well. When updating list make sure to use .slice(0) to change reference. If useWindowAsScrollContainer is ommited, both containerHeight and scrollContainer (the node that has the active .scrollTop) props are required.

Download Details:

Author: Radivarig

Source Code: https://github.com/Radivarig/react-infinite-any-height

#react #reactjs #javascript