An infinite loading list component in React

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!