react-infinite-any-height

Wrapper component for react-infinite which auto calculates element heights.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-infinite-any-height
4172.3.05 years ago7 years agoMinified + gzip package size for react-infinite-any-height in KB

Readme

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.

License

MIT