Bpk-component-infinite-scroll NPM

bpk-component-infinite-scroll

Backpack infinite scroll component.

Installation

npm install bpk-component-infinite-scroll --save-dev

Usage

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 }) => (
  <div id="list">
    {elements.map(element => (
      <div key={element} style={{ height: '50px' }}>
        {element}
      </div>
    ))}
  </div>
);

const elementsArray = [
  'element 1',
  'element 2',
  'element 3',
  'element 4',
  'element 5',
  'element 6',
  'element 7',
  'element 8',
  'element 9',
  'element 10',
];

const CustomLoading = () => (
  <div>
    <BpkSpinner type={SPINNER_TYPES.primary} />
  </div>
);

const CustomSeeMore = ({ onSeeMoreClick }) => (
  <div>
    <BpkButton onClick={onSeeMoreClick}>See More</BpkButton>
  </div>
);

const InfiniteList = withInfiniteScroll(SomeList);
const dataSource = new ArrayDataSource(elementsArray);

export default () => (
  <InfiniteList
    dataSource={dataSource}
    renderLoadingComponent={CustomLoading}
    renderSeeMoreComponent={CustomSeeMore}
    seeMoreAfter={1}
  />
);

Accompanying classes

DataSource

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.

Methods

fetchItems(index, nElements)

Called by the InfiniteScroll component every time new data is requested (by scrolling down) and should return the data starting from index plus nElements (number of elements). It should return a promise object.

Example:

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.

import React from 'react';
import PropTypes from 'prop-types';
import withInfiniteScroll, { DataSource } from 'bpk-component-infinite-scroll';

const SomeList = ({ elements }) => (
  <div id="list">
    {elements.map(element => (
      <div key={element} style={{ height: '50px' }}>
        {element}
      </div>
    ))}
  </div>
);

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 () => (
  <InfiniteList dataSource={new RemoteFlightsDataSource()} />
);

ArrayDataSource

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.

Methods

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.

Props

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

`elementsPerScroll`

How many more elements to load every time the user reaches the bottom of the list.

`initiallyLoadedElements`

How many more elements to load every time the user reaches the bottom of the list.

`seeMoreAfter`

seeMoreAfter is how many scrolls should happen before a 'See more' button is displayed. This only happens once.

bpk-mixins bpk-react-utils intersection-observer prop-types

@infinitebrahmanuniverse/nolb-bp @everything-registry/sub-chunk-1259 @zalastax/nolb-bp

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago