@readr-media/react-infinite-scroll-list v1.2.0

@readr-media/react-infinite-scroll-list ·

The component progressively fetches data when page being scrolled to bottom and renders them.

Usage Guide

Example

Props Explanation

What is T

T is generic type for data coming from fetches (fetchListInPage) or to be used by render function (children). It can be set explicitly or infered implicitly. You should ensurce T in initialList, fetchListInPage and children that represents the same type.

Relation between amountOfElements, pageAmount and pageSize

• Neither amountOfElements nor pageAmount are set

  fetches will be fired util no more data

• If only amountOfElements is set

  fetches will be fired util no more data or amount of items reached amountOfElements

• If only pageAmount is set

  fetches will be fired util no more data or amount of fetches reached pageAmount

• If both amountOfElements nor pageAmount are set

  fetched will be fired util one of following situations:

  1. no more data
  2. amount of items reached Math.min(amountOfElements, pageAmount * pageSize)

Trigger loadmore

• Default (hasCustomTrigger: false)
  • This component appends an element which triggers load-more effect at the end of the element list by default
• Custom Trigger (hasCustomTrigger: true)
  • Set the prop hasCustomTrigger to true and use the customTriggerRef as the second argument from the children callback to to designate element as trigger point (check custom-trigger-example)

Note

The props hasCustomTrigger and isAutoFetch are in XOR relationship which means that hasCustomTrigger can't be set when isAutoFetch is set, vice versa.

Development Guide

Installation

yarn install

Development

$ yarn dev
// or
$ npm run dev
// or
$ make dev

Build

$ npm run build
// or
$ make build

Publish

After executing Build scripts, we will have ./dist and /lib folders, and then we can execute publish command,

npm publish

Note: before publish npm package, we need to bump the package version first.