LoginSignup
0
0

More than 5 years have passed since last update.

Sample code for react-infinite using ES6 syntax without React.createClass

Last updated at Posted at 2017-04-28

I want to implement infinite scroll in my app.
I found https://github.com/bvaughn/react-virtualized, but it's a bit heavy. I want to use a simple and thin one, and then I found react-infinite

react-infinite
https://github.com/seatgeek/react-infinite

sample code for react-infinite with a create-react-app environment

  • using create-react-app
  • using ES6 syntax
  • without React.createClass

NOTE

  • this sample code has elements in React Component's state
    It's a bit weird.

code

import React, { Component } from 'react';
import Infinite from 'react-infinite';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <InfiniteList />
      </div>
    );
  }
}

class ListItem extends React.Component {

  render () {
    return (
      <div className="infinite-list-item">
        List Item {this.props.num}
      </div>
    );
  };
};


class InfiniteList extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      elements: this.buildElements(0, 100),
      isInfiniteLoading: false
    };
  }

  buildElements (start, end) {
    let elements = [];
    for (let i = start; i < end; i++) {
      elements.push(<ListItem key={i}/>)
    }
    return elements;
  }

  handleInfiniteLoad () {
    let that = this;
    this.setState({
      isInfiniteLoading: true
    });
    setTimeout(function() {
      let elemLength = that.state.elements.length,
        newElements = that.buildElements(elemLength, elemLength + 1000);
      that.setState({
        isInfiniteLoading: false,
        elements: that.state.elements.concat(newElements)
      });
    }, 2500);
  }

  elementInfiniteLoad () {
    return <div className="infinite-list-item">
      Loading...
    </div>;    
  }

  render () {
    return <Infinite elementHeight={40}
      containerHeight={250}
      infiniteLoadingBeginBottomOffset={200}
      onInfiniteLoad={this.handleInfiniteLoad}
      loadingSpinnerDelegate={this.elementInfiniteLoad()}
      isInfiniteLoading={this.state.isInfiniteLoading}
    >
      {this.state.elements}
    </Infinite>;
  }
};


export default App;

Gif

fc7db198376555f0d19d3dff3581d2af.gif

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0