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

@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

Name	Data Type	isRequired	Description
initialList	T[] 1	false	initial data from upstream to be rendered
amountOfElements 2	number	false	maximum of items to be rendered
pageAmount	number	false	Maxmium of fetches (fetchListInPage) to be fired
pageSize	number	true	The amount of items per scroll page
isAutoFetch	boolean	false (default: true)	Whether data fetch is executed atomatically
fetchListInPage	(page: number) => Promise<T[]> 1	true	The function to fetch more data, which will be executed when page is scrolled to bottom
children	(renderList: T[], customTriggerRef?: React.RefObject<HTMLElement>) => ReactNode 1	true	The function to render data list
loader	ReactNode	false	The loader element to be displayed during data loading
hasCustomTrigger	boolean	false	Wether the custom trigger ref will be provided throught children callback to set up trigger point

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.