How to use react-lazyload or react-lazy-load without set height prop?

Question

I want to lazy load an article list component but both react-lazyload and react-lazy-load enforce me to set height prop properly. In the documentation of react-lazyload, they mention it is possible to use without height but it doesn't work on my example. Because I don't lazyload on the root level.

And, if you wonder why I don't want to have height prop, cause, I don't want to see a huge scrollbar next to my article list. Better to see scrollbar get bigger while scrolling down.

The below code is working but I want to run it without height prop.

function ArticleList({ articles }) {

    return (
        <List>
            {articles.map(article => {
                return (
                    <LazyLoad key={article.uuid} height={129}>
                        <ArticleListItem showClose={false} {...article} />
                    </LazyLoad>
                )
            })}
        </List>
    )
}

Any recommendations to solve my issue?

Answer 1

Looks like there is not any good way to use react-lazyload and react-lazy-load without height prop. The solution was react-lazy-load-image-component for me. Although the name makes feel this is only for images, it is not.

import React from 'react';
import { LazyLoadComponent } from 'react-lazy-load-image-component';
 
const Component = () => (
  <div>
    <LazyLoadComponent>
      <p>I am LazyLoaded</p>
    </LazyLoadComponent>
  </div>
);
 
export default Component;