react-infinite-scroll-trigger

A visibility based trigger for loading more data.

Behaviour

This library provides a React component, which synchronously, continuously calls the loadMore function, while:

• the component is visible
• the loadMore function returns true
• the component is not already loading data

The component uses an IntersectionObserver to respond to visiblity changes.

Example

Please see the Homepage.

Install

npm install --save react-infinite-scroll-trigger

Usage

The bare minimum

import InfiniteScrollTrigger from 'react-infinite-scroll-trigger'
...
<InfiniteScrollTrigger loadMore={yourAsyncFunction} />

With some pseudo code

import React from 'react'
import InfiniteScrollTrigger from 'react-infinite-scroll-trigger'

const App = () => {
  const [data, setData] = React.useState([])

  const loadMoreAsync = () =>
    apiAsyncLoadData((data = [], hasMore = true) => {
      setData((ps) => [...ps, ...data])
      return hasMore
    })

  return (
    <div>
      {data.map((d) => (
        <div key={d}>{d}</div>
      ))}
      <InfiniteScrollTrigger loadMore={loadMoreAsync} />
    </div>
  )
}

Full example

See the example code.

Configuration

| Type | Attribute | Cardinality | Default | Description | | -------- | ---------------- | ----------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | function | loadMore | required | - | An async function whose Promise resolves to a truthy value. true indicates there's more data to load, while false indicates no more data to load. | | function | renderLoading | optional | () => <i>Loading...</i> | The component to display, when loading data. | | function | renderNoMoreData | optional | () => <i>No more data.</i> | The component to display, when there is no more data to load. | | object | inViewConfig | optional | {} | Configuration for the 'react-intersection-observer'. | | number | reloadDelayMs | optional | 200 | How long to wait to allow React to re-render components (which affects visibility), before re-checking whether to load more data. |

Tips

1. You can play with CSS styling to resize and reposition the trigger area.
   • E.g. to start loading data 100px before the end of a list of elements (when vertically scrolling down)

     <InfiniteScrollTrigger style={{ height: '100px', marginTop: '-100px' }} ... />

License

Apache 2.0 © nickgrealy