When I created this package, I didn't know that React has a convenient api called React.Children.map. As a result, I used props.Item and props.itemData to render the children of InfiniteScroll. To be honest, this approach made this package not intuitive.

After I learned React.Children.map, this api can make this package more intuitive and more easy to use. As a result, I deleted props.Item and props.itemData from InfiniteScroll, and used React.Children.map and React.cloneElement to pass reference to the child that should be observed.

Now you can use InfiniteScroll like other component, just pass the items to its children, it will call the next function when the observed child shows up in the viewport.

In v1.1.0, there is a new property called threshold in InfiniteScroll. Since InfiniteScroll is implemented with IntersectionObserver, is is easy to implement the threshold functionality. The only thing that is different with IntersectionObserver is InfiniteScroll does not allow passing number array to threshold.

Hi all, I'm Xuan, the author of this package. In this post I want to talk about why I create this package.

I started learning front-end development about 6 months ago. During the time I learned front-end knowledge, I found that there are so many awesome packages in NPM. This does motivate me to create my own package.