react-easy-infinity-scroller

A simple and reusable <InfinityScroller />

Features:

• simple and intuitive; works with just the children and loadNext props
• 4kb unminified
• works on Chrome, Firefox, Edge, and IE10

Live Demo and Example

https://coldshower.github.io/react-easy-infinity-scroller

Installation

npm install react-easy-infinity-scroller

Using it

import { InfinityScroller } from 'react-easy-infinity-scroller';

// ...

loadNext() {
  const { pictures, currentPage } = this.state;

  const newPage = currentPage + 1;
  if (newPage * ITEMS_PER_PAGE < TOTAL_NUM_OF_PICTURES) {
    return this.callApi(newPage)
      .then(results => {
        this.setState({
          pictures: pictures.concat(results)),
          currentPage: newPage
        });
      });
  }
}

// ...

<InfinityScroller 
  loadNext={loadNext}
>
  { pictures.map(picture => (
    <div key={picture.id}>
      <img src={picture.url} />
    </div>
  ))}
</InfinityScroller>

// ...

Check the demo and its code in /docs for a more real life example!

Props

Name	Type	Default	Description
loadNextrequired	function		a function that makes an API call, usually with modified page or offset query params for the next part of the content
children	node or array		usually a list of whatever you want to be infinitely scrolled
isLoading	boolean	false	default usually will suffice but if you want each picture to take up more room in a row, then increase this until satisfied
remainingScroll	number	400	remaining height(px) on scrollbar before loadNext is called

Contributing

1. Clone the repository
2. nvm use and npm install
3. npm start and open localhost:8080
4. Submit a pull request

Notes

Stock photos are from Pixabay's Developer API and can be found here https://pixabay.com/en/photos/new+york+city/.