Skip to content

A visibility based trigger for infinitely loading more data.

License

Notifications You must be signed in to change notification settings

mountain-pass/react-infinite-scroll-trigger

Repository files navigation

react-infinite-scroll-trigger

A visibility based trigger for loading more data.

GitHub license NPM JavaScript Style Guide

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