React Infinite Scroll Examples

In this tutorial we will look at React Infinite scroll examples via different libraries:

1. react-infinite-scroll-hook

This is a hook to create infinite scroll components!

Basically, we need to set a sentry component to trigger infinite loading. When sentry becomes visible on the screen or it comes near to be visible (based on our config of course), it triggers infinite loading (by calling onLoadMore callback) all with the help of IntersectionObserver.

sentry should be some component which will not be unmounted as long as we want to keep the infinite scrolling observer active. For example, we can use a "loading" indicator as our sentry. The trick is, because that we want to keep the infinite scrolling observer active as long as there is a next page, we need to keep this "loading" component mounted even if we don't have a loading flag as true. This will also keep our layout more consistent and prevent flickering etc.

We don't need to use a "loading" component as the sentry and we can keep them separate too. It can be anything like some empty div or last item of your list etc. We just need to place it based on our scrolling direction. To bottom if we want to trigger loading when we scroll to bottom, to top if we want to trigger it when we scroll to top like a chat message box etc. Same approach can be used with horizontal scrolling too.

Note: This package uses IntersectionObserver under the hood. You might want to check the browser compatibility from here and if you want to support older browsers, you might need to use a polyfill.

Before v4, useInfiniteScroll hook would basically check the DOM with an interval and look at the distance between the bottom of your "infinite" component and the bottom of the window. This was a simple solution. But it had its difficulties. It was not so easy to change the layout of your "infinite" component (like creating a chat message box with inverted scrolling etc). It was a requirement to modify the package based on each different use case.

And also, checking the DOM with an interval by using setInterval wasn't a sophisticated solution. It was enough, but it had it's limits. With v4, we migrated to use IntersectionObserver and created a much more flexible API to support different design. Basically, now we have a little bit more inversion of control.

Demo

Live demo is here.

Step 1: Installation

npm install react-infinite-scroll-hook

Step 2: Write Code

Here is a simple example

Simple Example

import useInfiniteScroll from 'react-infinite-scroll-hook';

function SimpleInfiniteList() {
  const { loading, items, hasNextPage, error, loadMore } = useLoadItems();

  const [sentryRef] = useInfiniteScroll({
    loading,
    hasNextPage,
    onLoadMore: loadMore,
    // When there is an error, we stop infinite loading.
    // It can be reactivated by setting "error" state as undefined.
    disabled: !!error,
    // `rootMargin` is passed to `IntersectionObserver`.
    // We can use it to trigger 'onLoadMore' when the sentry comes near to become
    // visible, instead of becoming fully visible on the screen.
    rootMargin: '0px 0px 400px 0px',
  });

  return (
    <List>
      {items.map((item) => (
        <ListItem key={item.key}>{item.value}</ListItem>
      ))}
      {/* 
          As long as we have a "next page", we show "Loading" right under the list.
          When it becomes visible on the screen, or it comes near, it triggers 'onLoadMore'.
          This is our "sentry".
          We can also use another "sentry" which is separated from the "Loading" component like:
            <div ref={sentryRef} />
            {loading && <ListItem>Loading...</ListItem>}
          and leave "Loading" without this ref.
      */}
      {(loading || hasNextPage) && (
        <ListItem ref={sentryRef}>
          <Loading />
        </ListItem>
      )}
    </List>
  );
}

Or if we have a scrollable container and we want to use it as our "list container" instead of document, we just need to use rootRef like:

function InfiniteListWithVerticalScroll() {
  const { loading, items, hasNextPage, error, loadMore } = useLoadItems();

  const [sentryRef, { rootRef }] = useInfiniteScroll({
    loading,
    hasNextPage,
    onLoadMore: loadMore,
    disabled: !!error,
    rootMargin: '0px 0px 400px 0px',
  });

  return (
    <ListContainer
      // This where we set our scrollable root component.
      ref={rootRef}
    >
      <List>
        {items.map((item) => (
          <ListItem key={item.key}>{item.value}</ListItem>
        ))}
        {(loading || hasNextPage) && (
          <ListItem ref={sentryRef}>
            <Loading />
          </ListItem>
        )}
      </List>
    </ListContainer>
  );
}

Arguments

Name	Description	Type	Optional	Default Value
loading	Some sort of "is fetching" info of the request.	boolean
hasNextPage	If the list has more items to load.	boolean
onLoadMore	The callback function to execute when the 'onLoadMore' is triggered.	VoidFunction
rootMargin	We pass this to 'IntersectionObserver'. We can use it to configure when to trigger 'onLoadMore'.	string
disabled	Flag to stop infinite scrolling. Can be used in case of an error etc too.	boolean
delayInMs	How long it should wait before triggering 'onLoadMore' (in milliseconds).	number		100

Reference

Read more here.
Find examples here.
Follow code author here.

Read Individually.

---

2. react-simple-infinite-loading

This is an abstraction of howto create an infinite loading list with React and GraphQL.

You can find a demo here.

Step 1: Install it

Install it using the below command:

npm install --save react-simple-infinite-loading

Step 2: Write Code

Here is an example

import React from 'react'

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

function Example({ items, fetchMore, hasMore }) {
  return (
    <div style={{ width: 300, height: 300 }}>
      <InfiniteLoading
        hasMoreItems={hasMore}
        itemHeight={40}
        loadMoreItems={fetchMore}
      >
        {items.map(item => <div key={item}>{item}</div>)}
      </InfiniteLoading>
    </div>
  )
}

Dependencies

react-simple-infinite-loading has only three dependencies:

• 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.

Properties

property name	required	type	description
children	yes	function	The children function should return the jsx for an item of the list. An object is passed as parameter containing item, index, style. You must pass the style to top-level tag of your item's jsx.
items	yes	array	An array of elements. Any type of elements is accepted.
itemHeight	yes	number	The height of an item. All items should have the same height.
itemsCount	no	number	The count of items to be loaded, if known. Prevents the scrollbar from changing its size as the items are being loaded.
hasMoreItems	no	boolean	A boolean that determines if there are still items to load using loadMoreItems function.
loadMoreItems	no	function	A function that will be called each time the list need to load more items.
placeholder	no	node	Any render-able value like strings or React.Nodes to be displayed while children is loading
customScrollbar	no	boolean	A boolean that determines if react-custom-scrollbars is used instead of native one
elementClassName	no	string	A React className prop that will be applied to every child container
ref	no	ref or function	A ref or a callback ref to get component instance so you can call instance's methods (see Methods section)

Methods

scrollTo(scrollOffset: number): void

see FixedSizeList methods section.

scrollToItem(index: number, align: string = "auto"): void

see FixedSizeList methods section.

resetloadMoreItemsCache(): void

Clear previously loaded items from cache.

example

import React from 'react'

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

function Example({ items, fetchMore, hasMore }) {
  const ref = React.useRef()
  const scrollToTop = () => {
    if (ref.current) {
      ref.current.scrollTo(0)
    }
  }
  const scrollTo50 = () => {
    if (ref.current) {
      ref.current.scrollToItem(50)
    }
  }
  const resetCache = () => {
    if (ref.current) {
      ref.current.resetloadMoreItemsCache()
    }
  }

  return (
    <>
      <button onClick={scrollToTop}>Scroll to top</button>
      <button onClick={scrollTo50}>Scroll to 50</button>
      <button onClick={resetCache}>Reset cache</button>
      <div style={{ width: 300, height: 300 }}>
        <InfiniteLoading
          hasMoreItems={hasMore}
          itemHeight={40}
          loadMoreItems={fetchMore}
          ref={ref}
        >
          {items.map(item => <div key={item}>{item}</div>)}
        </InfiniteLoading>
      </div>
    </>
  )
}

Reference

Read more here.
Find an example here.
Follow code author here.

Read Individually.

---