react-infinite-loading-web

A light-weight infinite loading component for React-powered websites

Installation

npm install react-infinite-loading-web

Basic Usage

Typically, you have a list of some items (say, product cards) inside of some scrollable wrapper component (say, a fixed-height div with overflow-y: auto style):

...

<SomeWrapper>
  {someItems.map((item) => <SomeItem item />)}
</SomeWrapper>
...

You want to dinamically load more items once a user reaches the end of the items list. For that, just import the component and place it right below the list:

...
import InfiniteLoading from 'react-infinite-loading-web';
...

<SomeWrapper>
  {someItems.map((item) => <SomeItem item />)}
  <InfiniteLoading load={loadHandler}/>
</SomeWrapper>
...

where loadHandler is your function called when you reach the end of the wrapper. This function should change the state of the component by calling the loaded method once the loading if finished, or the done method once the loading isn't needed anymore:

const loadHandler = (state) => {
  const items = ... // get new items
  ... // add the new items to the items list

  if (items.length) {
    state.loaded(); // change state to `loaded`
    return;
  }

  state.done(); // stop the loading
}

That's it! Enjoy!

Optional Usage

Use a custom spinner

Optionally, you can provide your own spinner:

...
import InfiniteLoading from 'react-infinite-loading-web';
...

<SomeWrapper>
  {someItems.map((item) => <SomeItem item />)}
  <InfiniteLoading
    load={loadHandler}
    spinner={<div className="some-spinner" />}
  />
</SomeWrapper>
...

Use window as a wrapper

Optionally, you can use window as a wrapper:

...
import InfiniteLoading from 'react-infinite-loading-web';
...

<SomeWrapper>
  {someItems.map((item) => <SomeItem item />)}
  <InfiniteLoading
    load={loadHandler}
    useWindow
  />
</SomeWrapper>
...

Increase the load distance

Optionally, you can force the component to attempt to load sooner by increasing the minimum distance between the component and the bottom of the wrapper (default is 20 px):

...
import InfiniteLoading from 'react-infinite-loading-web';
...

<SomeWrapper>
  {someItems.map((item) => <SomeItem item />)}
  <InfiniteLoading
    load={loadHandler}
    distance={100}
  />
</SomeWrapper>
...

License

MIT