react-virtualized-infinite-scroll
react-virtualized-infinite-scroll copied to clipboard
Published
20 hours ago •
SolidStateGroup
SolidStateGroup
Infinite scroll list React component
React Virtualized Infinite Scroll Component
A React component that provides you with an infinite scrolling list that be used in either direction.
Install
$ npm install react-virtualized-infinite-scroll --save
Usage
import InfiniteScroll from 'react-virtualized-infinite-scroll';
...
loadMore = () => {
// Set state to loading data
this.setState({
isLoading: true,
});
// @TODO Perform asychronous load of data
}
// Optional function to return dynamic row height
rowHeight = ({ index }) => {
return index < this.state.data.length ? this.state.data[index].height : 40;
}
// Example function for adding data to the bottom of the list in reverse mode
addToBottom = () => {
let data = this.state.data.slice(0);
data.unshift({ key: data.length, height: this.getRandomHeight() });
this.setState({ data });
if (this.infiniteScroll) {
this.infiniteScroll.adjustScrollPos(this.state.randomRowHeights ? data.height * -1 : -40);
}
}
renderRow (row) {
return (
<div className=".FlexTable__row" key={row.key}>
Row {row.key + 1}
</div>
);
}
render () {
return (
<div>
<InfiniteScroll
loadMore={this.loadMore}
renderRow={this.renderRow}
rowHeight={this.rowHeight}
threshold={50}
data={this.state.data}
isLoading={this.state.isLoading}
renderLoading={(
<div style={{ height: 40 }}>
Loading...
</div>
)}
containerHeight={200}
ref={(infiniteScroll) => this.infiniteScroll = infiniteScroll}
scrollRef={(virtualScroll) => this.virtualScroll = virtualScroll}
reverse={this.props.reverse}
/>
</div>
);
}
Prop Types
| Property | Type | Required? | Description |
|---|---|---|---|
| loadMore | Function | ✓ | Callback used for loading more data |
| renderRow | Function | ✓ | Used to render each row |
| rowHeight | Number or Function | ✓ | Either a fixed row height (number) or a function that returns the height of a row given its index: ({ index: number }): number |
| threshold | Number | ✓ | How many rows before the bottom (or top in reverse mode) to request more data |
| isLoading | Bool | While true a loading item is shown at the bottom (or top in reverse mode). Useful while loading more data | |
| scrollToRow | Number | Row index to ensure visible (by forcefully scrolling if necessary) | |
| renderLoading | Object | Render a custom loading item | |
| data | Array | Data array | |
| containerHeight | Number | Force a height on the entire list component. Default is to auto fill available space | |
| reverse | Bool | Reverse scroll direction. Defaults to false |
|
| scrollRef | Function | Callback used to give back reference to underlying virtual scroll component for finer control |
Development
Should you wish to develop this module further start by cloning this repository
Run Dev - Run hot reloading node server
$ npm start
Run Prod - Build, deploy, minify npm module
$ npm run prod
Testing the module
See InfiniteScrollExample.js, this component imports your developed module, if you wish to point to production then uncomment the other import line for InfiniteScroll
Getting Help
If you encounter a bug or feature request we would like to hear about it. Before you submit an issue please search existing issues in order to prevent duplicates.
Contributing
For more information about contributing PRs, please see our Contribution Guidelines.
Get in touch
If you have any questions about our projects you can email [email protected].
SolidStateGroup