react-infinite-scroll-component

A component to make all your infinite scrolling woes go away with just 4.15 kB! Pull Down to Refresh feature added. An infinite-scroll that actually works and super-simple to integrate!

Install

  npm install --save react-infinite-scroll-component

  or

  yarn add react-infinite-scroll-component

  // in code ES6
  import InfiniteScroll from 'react-infinite-scroll-component';
  // or commonjs
  var InfiniteScroll = require('react-infinite-scroll-component');

Using

Loading...}
  endMessage={
    <p style="{{">
      <b>Yay! You have seen it all</b>
    </p>
  }
  // below props only if you need pull down functionality
  refreshFunction={this.refresh}
  pullDownToRefresh
  pullDownToRefreshThreshold={50}
  pullDownToRefreshContent={
    <h3 style="{{">↓ Pull down to refresh</h3>
  }
  releaseToRefreshContent={
    <h3 style="{{">↑ Release to refresh</h3>
  }
&gt;
  {items}

Using scroll on top

<div style="{{" id="scrollableDiv">
  {/*Put the scroll bar always on the bottom*/}
  Loading...}
    scrollableTarget="scrollableDiv"
  &gt;
    {this.state.items.map((_, index) =&gt; (
      <div style="{style}">
        div - #{index}
      </div>
    ))}
  
</div>

The InfiniteScroll component can be used in three ways.

• Specify a value for the height prop if you want your scrollable content to have a specific height, providing scrollbars for scrolling your content and fetching more data.
• If your scrollable content is being rendered within a parent element that is already providing overflow scrollbars, you can set the scrollableTarget prop to reference the DOM element and use it's scrollbars for fetching more data.
• Without setting either the height or scrollableTarget props, the scroll will happen at document.body like Facebook's timeline scroll.

docs version wise

3.0.2

live examples

• infinite scroll (never ending) example using react (body/window scroll)
  • 
• infinte scroll till 500 elements (body/window scroll)
  • 
• infinite scroll in an element (div of height 400px)
  • 
• infinite scroll with scrollableTarget (a parent element which is scrollable)
  • 

props

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Ankeet Maini 💬 📖 💻 👀 🚧

Darsh Shah 🚇

This project follows the all-contributors specification. Contributions of any kind are welcome!

LICENSE

MIT