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

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

Usage

$3

`jsx
import InfiniteScrollTrigger from 'react-infinite-scroll-trigger'
...

`

$3

`jsx
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 (


| 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)
> `

License

Apache 2.0 © nickgrealy