Yvonnick Frin

moon indicating dark mode
sun indicating light mode

An infinite loading list component in React

August 26, 2019

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.

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!


Yvonnick Frin
Open source advocate at @ZenikaIT.
I'm a @NantesJS co-organizer on my spare time.

Projects