Photo by Jaël Vallée on Unsplash
Hi 👋,
Last week I wrote an article about creating an infinite loading list with React and GraphQL. I figured out it was possible to write an abstraction for this particular case.
I introduce you react-simple-infinite-loading. It displays a list elements that load as the user scrolls down the list.
Here is an example of code. You can find a more concrete example in the repository of my previous article using a GraphQL server.
import React from 'react'
import InfiniteLoadingList from 'react-simple-infinite-loading'
function Example ({ items, fetchMore, hasMore }) {
return (
<div style={{ width: 300, height: 300 }}>
<InfiniteLoading
items={items}
itemHeight={40}
hasMoreItems={hasMore}
loadMoreItems={fetchMore}
>
{({ item, style }) => (
<div style={style}>{item}</div>
)}
</InfiniteLoading>
</div>
)
}
It uses three libraries from Brian Vaughn:
- react-window is made to display efficiently large lists. It only creates components for the visible elements and reuse nodes.
- react-window-infinite-loader is a HOC that loads elements just-in-time as user scrolls down the list
- react-virtualized-auto-sizer helps you displaying your list so it fits the space available in its parent container.
If you are interested feel free to give it a try!
Repository: https://github.com/frinyvonnick/react-simple-infinite-loading
Feedback and contributions are appreciated 🙏 Please tweet me if you have any questions @YvonnickFrin!
Hope it will help!
Top comments (0)