react-infinite-scroll-component npm webpack

An awesome Infinite Scroll component in react.

react-infinite-scroll-component npm npm

A component to make all your infinite scrolling woes go away with just 4.15 kB!

install

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

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

demos

The code for demos is in the demos/ directory. Open lib/index.html in your browser to see the demos in action.

using

The InfiniteScroll component can be used in two ways.

  • Without giving any height to your scrollable content. In which case the scroll will happen at document.body like Facebook’s timeline scroll.
  • If you want your scrollable content to have a definite height then your content will be scrollable with the height specified in the props.
  <InfiniteScroll
    next={functionToLoadNextData}
    hasMore={true}
    loader={<h4>Loading...</h4>}>
    {items} // your long array goes in here
  </InfiniteScroll>

props

name type description
next function a function which must be called after reaching the bottom. It must trigger some sort of action which fetches the next data. The data is passed as children to the InfiniteScroll component and the data should contain previous items too. e.g. Initial data = [1, 2, 3] and then next load of data should be [1, 2, 3, 4, 5, 6].
hasMore boolean it tells the InfiniteScroll component on whether to call next function on reaching the bottom and shows an endMessage to the user
children node (list) the data items which you need to scroll.
loader node you can send a loader component to show while the component waits for the next load of data. e.g. <h3>Loading...</h3> or any fancy loader element
scrollThreshold number a threshold value after that the InfiniteScroll will call next. By default it’s 0.8. It means the next will be called when the user comes below 80% of the total height.
endMessage node this message is shown to the user when he has seen all the records which means he’s at the bottom and hasMore is false
style object any style which you want to override
height number optional, give only if you want to have a fixed height scrolling content
hasChildren bool children is by default assumed to be of type array and it’s length is used to determine if loader needs to be shown or not, if your children is not an array, specify this prop to tell if your items are 0 or more.

Related Repositories

react-list

react-list

:scroll: A versatile infinite scroll React component. ...

react-infinite-scroll

react-infinite-scroll

An infinite scroll component for React ...

redux-infinite-scroll

redux-infinite-scroll

React infinite scroll component designed for a Redux data-flow. ...

endless

endless

A simple, fast and versatile infinite scroll component for React ...

react-infinite-scroll-component

react-infinite-scroll-component

An awesome Infinite Scroll component in react. ...


Top Contributors

ankeetmaini harrybabu

Releases

-   v1.4.1 zip tar
-   v1.4.0 zip tar
-   v1.3.0 zip tar
-   v1.2.0 zip tar
-   v1.1.0 zip tar
-   v1.0.1 zip tar