ReactJS component for displaying infinite list of elements with arbitrary height.
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

react-infinite-any-height

react-infinite with automatic height calculation.

Try it - Live Example

Install

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

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

// ...
var React = require('react')
var ReactDOM = require('react-dom')

var InfiniteAnyHeight = require('react-infinite-any-height')

var App = React.createClass({
  getInitialState() {
    var list =
      new Array(10000).fill('').map((x, i)=>{
        var height = 100 +Math.round(Math.abs((Math.sin(i) *250)))
        return (
          <div key={i} style={{height: height, width: '100wv', border: 'solid 1px', backgroundColor: '#' +height}}>
            height: {height +2 /*border width*/}
            <div style={{textAlign: 'center', color: 'white'}}>
              item: {i}
            </div>
          </div>
        )
      })
    return {list}
  },

  render: function() {
    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