ris
@fand/react-infinite-scroll-container-test
npm i @fand/react-infinite-scroll-container-test
ris

@fand/react-infinite-scroll-container-test

A simple component for infinite scroll

by Takayosi Amagi

0.0.3 (see all)License:MITTypeScript:Not Found
npm i @fand/react-infinite-scroll-container-test
Readme

@fand/react-infinite-scroll-container

Build Status NPM Version License Coverage Status

A simple component for infinite scroll.

Installation

npm install -S @fand/react-infinite-scroll-container

Example

import InfiniteScrollContainer from '@fand/react-infinite-scroll-container';

class App extends React.Component {

  constructor () {
    super();
    this.state = {
      items : [],
      pos   : 0,
    };
  }

  componentDidMount () {
    this.loadNextItems();
  }

  loadNextItems () {  
    fetch(`/api/items?offset=${pos}`).then(r => r.json()).then((items) => {
      this.setState({
        items : this.state.items.concat(items),
        pos   : this.state.pos + items.length,
      });
    });    
  }

  render () {
    return (
      <div className="App">
        <InfiniteScrollContainer
          padding={100}
          interval={300}
          onScroll={() => this.loadNextItems()}>

          {this.state.items.map((i) => <Item key={i.id} item={i} />)}

        </InfiniteScrollContainer>
      </div>
    );
  }
}

LICENSE

MIT

Downloads/wk

7

GitHub Stars

20

LAST COMMIT

6yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

1
VersionTagPublished
0.0.3
latest
6yrs ago
No alternatives found
No tutorials found
Add a tutorial