@mountainpass/react-infinite-scroll-trigger
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.20 • Public • Published

    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

    Install

    npm i @mountainpass/react-infinite-scroll-trigger

    DownloadsWeekly Downloads

    66

    Version

    1.0.20

    License

    Apache-2.0

    Unpacked Size

    80.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • nickgrealy
    • tompahoward