ris

@fand/react-infinite-scroll-container

A simple component for infinite scroll

Showing:

Popularity

Downloads/wk

9

GitHub Stars

20

Maintenance

Last Commit

5yrs ago

Contributors

0

Package

Dependencies

1

Size (min+gzip)

26.0KB

License

MIT

Type Definitions

Tree-Shakeable

No?

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100