Skip to content

noopkat/react-infinite-scroller

master
Switch branches/tags
Code
This branch is 201 commits behind danbovey:master.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

React Infinite Scroller

npm React Version npm npm

Infinitely load content using a React Component. This fork maintains a simple, lightweight infinite scroll package that supports both window and scrollable elements.

Installation

  npm i react-infinite-scroller

How to use

The module supports ES6 imports with jsnext:main and require with main in the package.json.

  import InfiniteScroll from 'react-infinite-scroller'

Window scroll events

  <InfiniteScroll
      pageStart={0}
      loadMore={loadFunc}
      hasMore={true || false}
      loader={<div className="loader">Loading ...</div>}>
    {items} // <-- This is the content you want to load
  </InfiniteScroll>

DOM scroll events

  <div style="height:700px;overflow:auto;">
    <InfiniteScroll
        pageStart={0}
        loadMore={loadFunc}
        hasMore={true || false}
        loader={<div className="loader">Loading ...</div>}
        useWindow={false}>
      {items}
    </InfiniteScroll>
  </div>
  • pageStart : The page number corresponding to the initial items, defaults to 0 which means that for the first loading, loadMore will be called with 1

  • loadMore(pageToLoad) : This function is called when the user scrolls down and we need to load items

  • hasMore : Boolean stating whether there are more items to be loaded. Event listeners are removed if false.

  • loader : Loader element to be displayed while loading items - You can use InfiniteScroll.setDefaultLoader(loader); to set a defaut loader for all your InfiniteScroll components

  • threshold : The distance between the bottom of the page and the bottom of the window's viewport that triggers the loading of new items - Defaults to 250

  • useWindow : Boolean stating whether to add listeners to the window, or else, the DOMNode

About

Infinite scroll component for React in ES6

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published