Last active
April 28, 2017 10:54
-
-
Save MasashiSalvador57f/6f964ddd430dc783fe60f6b8244648a3 to your computer and use it in GitHub Desktop.
Sample code for react-infinite using ES6 syntax without React.createClass ref: http://qiita.com/MasashiSalvador/items/8c96952bde4bb20776d8
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment