@srph/react-infinite-scroll

A simple infinite scroll React.js component

Usage no npm install needed!

<script type="module">
  import srphReactInfiniteScroll from 'https://cdn.skypack.dev/@srph/react-infinite-scroll';
</script>

README

react-infinite-scroll

npm i @srph/react-infinite-scroll

A simple infinite scroll React.js component.

Why

  • I was a bit frustrated with the existing libraries, so I went to come up with a simpler API.
  • I'd like to keep this library simple -- if you're looking for more advanced features and performant implementations, please check react-virtualized and react-infinity.

Usage

<Infinite callback={this.request} disabled={this.state.loading}>
  {this.state.items((item, i) =>
    <div key={i}>{item.name}</div>
  )}
</Infinite>

API

Prop Description Type
callback The callback to be ran when we reach the offset function (required)
disabled Flag to run callback once we reach the offset boolean (default: false)
offset Allowance before reaching the offset number (default: 250)
container Flag if we're using the window (false) or this div (requires to be scrollable) boolean (default: false)
reverse Trigger callback when we reach the top instead of the bottom. Useful for chat applications. boolean (default: false)

Examples

You can check the demo, or build it yourself:

npm run install
npm run example:run