ReactJS Component for Displaying infinite List of Elements with Arbitrary Height

ReactJS Component for Displaying infinite List of Elements with Arbitrary Height

react-infinite-any-height .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 [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.

Download Details:

Author: Radivarig

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

react reactjs javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

What is ReactJS? | ReactJS Basics | Learn ReactJS | React for Beginners | ReactJS Training

This Edureka video on "What is ReactJS ?" will help you understand the fundamentals of ReactJS and help you in building a strong foundation in React by understanding the advantages of ReactJS along with its features and major aspects.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.