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 }}>
{({ item, style }) => (
<div style={style}>{item}</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!


Feedback and contributions are appreciated ๐Ÿ™ Please tweet me if you have any questions @YvonnickFrin!

Hope it will help!

Profile picture

Lead developer at Pix.
I'm NantesJS co-organizer on my spare time.

Twitterย .ย Github

ยฉ 2023, Built with Gatsby