Wondering what’s next for npm?Check out our public roadmap! »

@fand/react-infinite-scroll-container

0.0.2 • Public • Published

@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}
          throttle={300}
          onScroll={() => this.loadNextItems()}>
 
          {this.state.items.map((i) => <Item key={i.id} item={i} />)}
 
        </InfiniteScrollContainer>
      </div>
    );
  }
}

LICENSE

MIT

Install

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

DownloadsWeekly Downloads

1

Version

0.0.2

License

MIT

Last publish

Collaborators

  • avatar