- Welcome
- Getting started
- Latest updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- App Search Modal
- Aria live
- Autosuggest
- Badge
- Banner alert
- Bar chart
- Blockquote
- Bottom navigation
- Bottom sheet
- Breadcrumb
- Breakpoint
- Button
- Calendar
- Card
- Card list
- Card button
- Carousel
- Checkbox
- Chip
- Chip group
- Code
- Content cards
- Data Table
- Datepicker
- Description list
- Dialog
- Divider
- Drawer
- Field Set
- Flare
- Flat list
- Flight leg
- Floating action button
- Floating notification
- Form label
- Form validation
- Graphic promotion
- Horizontal navigation
- Icon
- Image
- Image Gallery
- Infinite scroll
- Info Banner
- Inset Banner
- Link
- List
- Map
- Mobile scroll container
- Modal
- Navigation bar
- Navigation Tab Group
- Nudger
- Overlay
- Page indicator
- Pagination
- Panel
- Phone input
- Picker
- Popover
- Price
- Progress bar
- Radio button
- Rating
- Rating Bar
- Scrollable calendar
- Search Modal
- Section header
- Section list
- Select
- Skeleton
- Skip link
- Slider
- Snackbar
- Snippet
- Spinner
- Split input
- Star rating
- Swap Button
- Switch
- Table
- Text
- Text input
- Theming
- Ticket
- Toast
- Tooltip
- Touchable native feedback
- Touchable overlay
- Search Input Summary
- Content
- Accessibility
- Contributing
- Localisation
Infinite scroll
This higher-order component is used to wrap a list component and add the functionality to allow that list to load more elements as the user scrolls.
Default
Loads five more list items upon reaching the bottom of the list.
One element per scroll
Loads one more list item upon reaching the bottom of the list.
Partial load
After 15 items have loaded, a button must be pressed to load more items.
Custom loading component
bpk-component-infinite-scroll
Backpack infinite scroll component.
Installation
Check the main Readme for a complete installation guide.
Usage
import PropTypes from 'prop-types';
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
import BpkSpinner, { SPINNER_TYPES } from '@skyscanner/backpack-web/bpk-component-spinner';
import withInfiniteScroll, {
ArrayDataSource,
} from '@skyscanner/backpack-web/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 PropTypes from 'prop-types';
import withInfiniteScroll, { DataSource } from '@skyscanner/backpack-web/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
Check out the full list of props on Skyscanner's design system documentation website.
Props
Made with ❤️ by Skyscanner © 2024
© 2024 Skyscanner Backpack. Page last updated on Oct 2, 2023, 15:54