react-infinite-scroll-component
Advanced tools
The react-infinite-scroll-component package provides a simple and efficient way to implement infinite scrolling in React applications. It allows you to load more content as the user scrolls down, which is particularly useful for displaying large lists of data without overwhelming the user or the browser.
Basic Infinite Scroll
This code demonstrates a basic implementation of infinite scrolling using the react-infinite-scroll-component package. It initializes a list of items and appends more items as the user scrolls down.
```jsx
import React, { useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
const App = () => {
const [items, setItems] = useState(Array.from({ length: 20 }));
const [hasMore, setHasMore] = useState(true);
const fetchMoreData = () => {
if (items.length >= 100) {
setHasMore(false);
return;
}
setTimeout(() => {
setItems(items.concat(Array.from({ length: 20 })));
}, 1500);
};
return (
<InfiniteScroll
dataLength={items.length}
next={fetchMoreData}
hasMore={hasMore}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
>
{items.map((i, index) => (
<div key={index} style={{ height: 30, border: '1px solid black', margin: 6, padding: 8 }}>
div - #{index}
</div>
))}
</InfiniteScroll>
);
};
export default App;
```Infinite Scroll with API Data
This example shows how to use react-infinite-scroll-component to load data from an API. It fetches data from a paginated API and appends it to the existing list of items as the user scrolls.
```jsx
import React, { useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
const App = () => {
const [items, setItems] = useState([]);
const [page, setPage] = useState(1);
const [hasMore, setHasMore] = useState(true);
useEffect(() => {
fetchMoreData();
}, []);
const fetchMoreData = async () => {
const res = await fetch(`https://api.example.com/data?page=${page}`);
const data = await res.json();
setItems([...items, ...data.items]);
setPage(page + 1);
if (data.items.length === 0) {
setHasMore(false);
}
};
return (
<InfiniteScroll
dataLength={items.length}
next={fetchMoreData}
hasMore={hasMore}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
>
{items.map((item, index) => (
<div key={index} style={{ height: 30, border: '1px solid black', margin: 6, padding: 8 }}>
{item.name}
</div>
))}
</InfiniteScroll>
);
};
export default App;
```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 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 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.
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
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');
<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={this.refresh}
pullDownToRefresh
pullDownToRefreshThreshold={50}
pullDownToRefreshContent={
<h3 style={{ textAlign: 'center' }}>↓ Pull down to refresh</h3>
}
releaseToRefreshContent={
<h3 style={{ textAlign: 'center' }}>↑ Release to refresh</h3>
}
>
{items}
</InfiniteScroll>
<div
id="scrollableDiv"
style={{
height: 300,
overflow: 'auto',
display: 'flex',
flexDirection: 'column-reverse',
}}
>
{/*Put the scroll bar always on the bottom*/}
<InfiniteScroll
dataLength={this.state.items.length}
next={this.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"
>
{this.state.items.map((_, index) => (
<div style={style} key={index}>
div - #{index}
</div>
))}
</InfiniteScroll>
</div>
The InfiniteScroll component can be used in three ways.
height prop if you want your scrollable content to have a specific height, providing scrollbars for scrolling your content and fetching more data.scrollableTarget prop to reference the DOM element and use it's scrollbars for fetching more data.height or scrollableTarget props, the scroll will happen at document.body like Facebook's timeline scroll.
scrollableTarget (a parent element which is scrollable)
| 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. 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 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 |
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!
FAQs
An Infinite Scroll component in react.
The npm package react-infinite-scroll-component receives a total of 460,392 weekly downloads. As such, react-infinite-scroll-component popularity was classified as popular.
We found that react-infinite-scroll-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.