React Infinitum

React Infinitum is a window infinite scroll loader

Install

npm install --save react-infinitum

Usage

1import React from 'react';
2import Infinitum from 'react-infinitum';
3
4let fakeData = [
5  {city: 'Curitiba', country: 'Brazil'},
6  {city: 'New York', country: 'United States'},
7  {city: 'Tokyo', country: 'Japan'}
8];
9
10class Feeds extends React.Component {
11  constructor(props) {
12    super(props);
13
14    this.state = {
15      cities: fakeData,
16      loadMore: true
17    };
18  }
19
20  loadMoreCities() {
21    // Set loadMore to false and ReactInfinitum will be blocked
22    this.setState({
23      loadMore: false
24    });
25
26    // Simulate an AJAX request
27    ajax.get('/cities')
28      .then(res => {
29        this.setState({
30          cities: this.state.cities.concat(res),
31          loadMore: true
32        });
33      })
34      .catch(() => {
35        // No more cities
36        this.setState({
37          loadMore: false
38        });
39      });
40  }
41
42  render() {
43    return (
44      <Infinitum onReachBottom={this.loadMoreCities.bind(this)} loadMore={this.state.loadMore}>
45        {this.state.cities.map((city, i) => {
46          return (
47            <div key={i}>
48              <p>{city.city}</p>
49              <p>{city.country}</p>
50            </div>
51          );
52        })}
53      </Infinitum>
54    );
55  }
56}
57
58export default Feeds;

Properties

Name	Type	Required?	Default Value	Description
onReachBottom	function	Yes	-	The callback that will be fired when window reach the page bottom
loadMore	boolean	No	true	The flag that indicate if will call the callback
trigger	number	No	0.85	A number between 0 - 1 that indicate the window scroll percentage to reach on page bottom