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.

An infinite loading list of persons

Here is an example of code. You can find a more concrete example in the repository of my previous article using a GraphQL server.

```jsx import React from 'react'

import InfiniteLoadingList from 'react-simple-infinite-loading'

function Example ({ items, fetchMore, hasMore }) { return (

{({ item, style }) => (
{item}
)}
) } ```

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!