react-infinite-scroll-component

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

<InfiniteScroll
  dataLength={items.length} //This is important field to render the next data
  next={fetchData}
  hasMore={true}
  loader={<h4>Loading...</h4>}
  endMessage={
    <p style={{ textAlign: 'center' }}>
      <b>Yay! You have seen it all</b>
    </p>
  }
  // below props only if you need pull down functionality
  refreshFunction={refresh}
  pullDownToRefresh
  pullDownToRefreshThreshold={50}
  pullDownToRefreshContent={
    <h3 style={{ textAlign: 'center' }}>&#8595; Pull down to refresh</h3>
  }
  releaseToRefreshContent={
    <h3 style={{ textAlign: 'center' }}>&#8593; Release to refresh</h3>
  }
>
  {items}
</InfiniteScroll>

Using scroll on top

<div
  id="scrollableDiv"
  style={{
    height: 300,
    overflow: 'auto',
    display: 'flex',
    flexDirection: 'column-reverse',
  }}
>
  {/*Put the scroll bar always on the bottom*/}
  <InfiniteScroll
    dataLength={items.length}
    next={fetchMoreData}
    style={{ display: 'flex', flexDirection: 'column-reverse' }} //To put endMessage and loader to the top.
    inverse={true}
    hasMore={true}
    loader={<h4>Loading...</h4>}
    scrollableTarget="scrollableDiv"
  >
    {items.map((_, index) => (
      <div style={style} key={index}>
        div - #{index}
      </div>
    ))}
  </InfiniteScroll>
</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.

What's new in v7

IntersectionObserver-based triggering

next() is now triggered by an IntersectionObserver watching an invisible sentinel element at the bottom of the list (top for inverse mode), rather than a scroll event listener. This means:

• The threshold is checked once when the sentinel enters the viewport, not on every scroll tick.
• No missed triggers when content loads fast enough to skip the threshold.
• Better performance — no work done while the user is scrolling through content that is far from the threshold.

Zero runtime dependencies

throttle-debounce has been removed. The package now ships with zero runtime dependencies. The onScroll callback receives every scroll event directly without throttling.

scrollableTarget accepts HTMLElement directly

Previously scrollableTarget only accepted a string element ID. It now accepts HTMLElement | string | null, so you can pass a ref value directly:

const ref = useRef(null);
// ...
<div ref={ref} style={{ height: 300, overflow: 'auto' }}>
  <InfiniteScroll scrollableTarget={ref.current} ...>
    {items}
  </InfiniteScroll>
</div>

Rewritten as a function component

The component is now a React function component. The public prop API is unchanged — no migration needed.

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

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.
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. <h3>Loading...</h3> or any fancy loader element
scrollThreshold	number | string	A threshold value defining when InfiniteScroll will call next. Default value is 0.8. It means the next will be called when user comes below 80% of the total height. If you pass threshold in pixels (scrollThreshold="200px"), next will be called once you scroll at least (100% - scrollThreshold) pixels down.
onScroll	function	a function that will listen to the scroll event on the scrolling container.
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
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 InfiniteScroll component. You should provide the id of the DOM node preferably.
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.
pullDownToRefresh	bool	to enable Pull Down to Refresh feature
pullDownToRefreshContent	node	any JSX that you want to show the user, default={<h3>Pull down to refresh</h3>}
releaseToRefreshContent	node	any JSX that you want to show the user, default={<h3>Release to refresh</h3>}
pullDownToRefreshThreshold	number	minimum distance the user needs to pull down to trigger the refresh, default=100px , a lower value may be needed to trigger the refresh depending your users browser.
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.
inverse	bool	set infinite scroll on top

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Ankeet Maini 💬 📖 💻 👀 🚧	Darsh Shah 🚇 💻 👀 🚧	Eliya Cohen 💻	Nitin Kukreja 💻	Bruno Sabetta 💻 📖	Osmar Pérez Bautista 💻
Shreya Dahal 💻	Vlad Harahan 💻 📖	Daniel Caldas 💻	Alaeddine Douagi 💻	Carlos 💻	Championrunner 📖
Daniel Sogl 💻	Darren Oster 💻	Illia Panasenko 💻	Kiko Beats 💻	Matt Trussler 💻	Nimit Suwannagate 💻
Rajat 💻	Rich 💻	Ritesh Goyal 💻	babycannotsay 💻	cesco 💻	Harry 💻
ludwig404 💻	Karl Johansson 💻	Geoffrey Teng 💻

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

LICENSE

MIT

Similar packages

Other packages similar to react-infinite-scroll-component

react-infinite

react-infinite is another package for implementing infinite scrolling in React applications. It provides more control over the rendering of items and supports features like variable heights for items. However, it can be more complex to set up compared to react-infinite-scroll-component.

react-virtualized

react-virtualized is a powerful library for efficiently rendering large lists and tabular data. It includes features like windowing, which only renders items that are visible in the viewport. While it offers more advanced features than react-infinite-scroll-component, it also has a steeper learning curve.

react-window

react-window is a lightweight alternative to react-virtualized, created by the same author. It focuses on performance and simplicity, making it easier to use for basic infinite scrolling needs. It is less feature-rich than react-virtualized but can be a good choice for simpler use cases.