https://github.com/solidstategroup/react-virtualized-infinite-scroll
Infinite scroll list React component
https://github.com/solidstategroup/react-virtualized-infinite-scroll
Last synced: 10 months ago
JSON representation
Infinite scroll list React component
- Host: GitHub
- URL: https://github.com/solidstategroup/react-virtualized-infinite-scroll
- Owner: SolidStateGroup
- Created: 2016-10-03T10:22:16.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-21T12:09:54.000Z (almost 9 years ago)
- Last Synced: 2025-04-14T15:50:07.324Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 75.2 KB
- Stars: 16
- Watchers: 6
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# 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 (
Row {row.key + 1}
);
}
render () {
return (
Loading...
)}
containerHeight={200}
ref={(infiniteScroll) => this.infiniteScroll = infiniteScroll}
scrollRef={(virtualScroll) => this.virtualScroll = virtualScroll}
reverse={this.props.reverse}
/>
);
}
```
### 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 projects@solidstategroup.com.