🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A ReactJS component for displaying infinite list of elements with arbitrary height.

Layout React

Documentation

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 [email protected]: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


You May Also Like