Backpack infinite scroll component.
npm install bpk-component-infinite-scroll> Backpack infinite scroll component.
``sh`
npm install bpk-component-infinite-scroll --save-dev
`js
import React from 'react';
import PropTypes from 'prop-types';
import BpkButton from 'bpk-component-button';
import BpkSpinner, { SPINNER_TYPES } from 'bpk-component-spinner';
import withInfiniteScroll, {
ArrayDataSource,
} from 'bpk-component-infinite-scroll';
const SomeList = ({ elements }) => (
const elementsArray = [
'element 1',
'element 2',
'element 3',
'element 4',
'element 5',
'element 6',
'element 7',
'element 8',
'element 9',
'element 10',
];
const CustomLoading = () => (
const CustomSeeMore = ({ onSeeMoreClick }) => (
const InfiniteList = withInfiniteScroll(SomeList);
const dataSource = new ArrayDataSource(elementsArray);
export default () => (
renderLoadingComponent={CustomLoading}
renderSeeMoreComponent={CustomSeeMore}
seeMoreAfter={1}
/>
);
`
DataSource is a class used by the BpkInfiniteScroll component to fetch items
and listen for changes in the data and react to it by reloading the current items
in the list.
fetchItems(index, nElements)
Called by the InfiniteScroll component every time new data isindex
requested (by scrolling down) and should return the data starting from plus nElements (number of elements). It should return a promise object.
Example:
`js`
fetchItems(0, 5); // should return 5 items starting from position 0
fetchItems(5, 5); // should return 5 items starting from position 5
_Calling this method directly in the DataSource class will result in an error, it should be implemented by the subclass extending DataSource._
onDataChange(cb)
Adds a new change listener to this DataSource, to be called when data is updated. Returns true if added or false otherwise.
removeListener(cb)
Removes the callback from the list of change listeners. Returns true if removed or false otherwise.
triggerListeners(...args)
Triggers all listeners in response to data changes. This method should be
used by subclasses to tell the InfiniteScroll component it should refresh
its data.
`js
import React from 'react';
import PropTypes from 'prop-types';
import withInfiniteScroll, { DataSource } from 'bpk-component-infinite-scroll';
const SomeList = ({ elements }) => (
class RemoteFlightsDataSource extends DataSource {
constructor() {
super();
myWebSocketConnection.on('dataChange', () => {
// tell the InfiniteScroll component to refresh its data
this.triggerListeners();
});
}
fetchItems(index, nElements) {
return fetch(https://my-api/flights?start=${index}&count=${nElements});
}
}
const InfiniteList = withInfiniteScroll(SomeList);
export default () => (
);
`
ArrayDataSource is a class that extends from DataSource. Accepts an array
as a parameter in the constructor and uses it as source for the infinite scroll.
> See Usage for an example of this class in use.
_refer to the DataSource methods section for a list of all methods_
fetchItems(index, nElements)
Returns a subset of the array data.
updateData(newData)
Updates the internal array and triggers all listeners.
| Property | PropType | Required | Default Value |
| ----------------------- | -------------------------------- | -------- | ------------- |
| dataSource | instanceOf(DataSource) | true | - |
| elementsPerScroll | number | false | 5 |
| initiallyLoadedElements | number | false | 5 |
| loaderMinDisplay | oneOf(['small', 'half', 'full']) | false | 'full' |
| onScroll | func | false | null |
| onScrollFinished | func | false | null |
| renderLoadingComponent | func | false | null |
| renderSeeMoreComponent | func | false | null |
| seeMoreAfter | number | false | null |
How many more elements to load every time the user reaches the bottom of the list.
How many more elements to load every time the user reaches the bottom of the list.
seeMoreAfter` is how many scrolls should happen before a 'See more' button is displayed. This only happens once.