React grid gallery lazy loading on scroll

Question

I am using React grid gallery( https://github.com/benhowell/react-grid-gallery ) to display images, but I can't lazy load as the scroll user on the page.

 <Gallery images={this.props.newExamples} enableImageSelection thumbnailImageComponent={ImageComponent} rowHeight={this.props.newExamples[0].thumbnailHeight} margin={10} onSelectImage={(index, image) => this.onSelectImageNewExample(index, image)} />

Answer 1

I used react-lazy-load-image-component in thumbnailImageComponent like this:

    class ImageComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render () {
        console.log(this.props.imageProps)
        return (
                <LazyLoadImage
                    height={this.props.imageProps.style.width}
                    width={this.props.imageProps.style.width} 
                    src={this.props.imageProps.src} 
                    />
        );
    }
}

edit with functional component for ANimator120 :

const ImageComponent = (props) => {
  const { imageProps } = props;

  return (
    <LazyLoadImage
      height={imageProps.style.width}
      width={imageProps.style.width}
      src={imageProps.src}
    />
  );
};