React Infinitum

React Infinitum is a window infinite scroll loader

Install

npm install --save react-infinitum

Usage

import React from 'react';
import Infinitum from 'react-infinitum';
 
let fakeData = [
  {city: 'Curitiba', country: 'Brazil'},
  {city: 'New York', country: 'United States'},
  {city: 'Tokyo', country: 'Japan'}
];
 
class Feeds extends React.Component {
  constructor(props) {
    super(props);
 
    this.state = {
      cities: fakeData,
      loadMore: true
    };
  }
 
  loadMoreCities() {
    // Set loadMore to false and ReactInfinitum will be blocked
    this.setState({
      loadMore: false
    });
 
    // Simulate an AJAX request
    ajax.get('/cities')
      .then(res => {
        this.setState({
          cities: this.state.cities.concat(res),
          loadMore: true
        });
      })
      .catch(() => {
        // No more cities
        this.setState({
          loadMore: false
        });
      });
  }
 
  render() {
    return (
      <Infinitum onReachBottom={this.loadMoreCities.bind(this)} loadMore={this.state.loadMore}>
        {this.state.cities.map((city, i) => {
          return (
            <div key={i}>
              <p>{city.city}</p>
              <p>{city.country}</p>
            </div>
          );
        })}
      </Infinitum>
    );
  }
}
 
export 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