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!
npm install --save react-infinite-scroll-component// in code ES6import InfiniteScroll from 'react-infinite-scroll-component';// or commonjsvar InfiniteScroll = require;
InfiniteScroll component can be used in three ways.
- Specify a value for the
heightprop 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
scrollableTargetprop to reference the DOM element and use it's scrollbars for fetching more data.
- Without setting either the
scrollableTargetprops, the scroll will happen at
document.bodylike Facebook's timeline scroll.
docs version wise
- 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)
|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
|hasMore||boolean||it tells the
|children||node (list)||the data items which you need to scroll.|
|dataLength||number||set the length of the data.This will unlock the subsequent calls to next.|
|loader||node||you can send a loader component to show while the component waits for the next load of data. e.g.
|scrollThreshold||number | string||A threshold value defining when
|onScroll||function||a function that will listen to the scroll event on the scrolling container. Note that the scroll event is throttled, so you may not receive as many events as you would expect.|
|endMessage||node||this message is shown to the user when he has seen all the records which means he's at the bottom and
|className||string||add any custom class you want|
|style||object||any style which you want to override|
|height||number||optional, give only if you want to have a fixed height scrolling content|
|scrollableTarget||node or string||optional, reference to a (parent) DOM element that is already providing overflow scrollbars to the
|pullDownToRefresh||bool||to enable Pull Down to Refresh feature|
|pullDownToRefreshContent||node||any JSX that you want to show the user,
|releaseToRefreshContent||node||any JSX that you want to show the user,
|pullDownToRefreshThreshold||number||minimum distance the user needs to pull down to trigger the refresh,
|refreshFunction||function||this function will be called, it should return the fresh data that you want to show the user|
|initialScrollY||number||set a scroll y position for the component to render with.|
|key||string||the key for the current data set being shown, used when the same component can show different data sets at different times,