✅ No assumption on the how you bring data, just wrap the content inside the InfiniteScroll component
If using npm:
npm i @simbathesailor/react-infinite-scroll --save
If using yarn:
yarn add @simbathesailor/react-infinite-scroll
import { InfiniteScroll } from '@simbathesailor/react-infinite-scroll';
function App() {
// setting up the active page fetched, It can be any logic needed
const [activePageInfo, setActivePageInfo] = React.useState(1);
// This is data recieved till now, which will be rendered.
const [dataInfiniteScroll, setDataInfiniteScroll] = React.useState(null);
// Logic to execute to get the initial set of results
// On mount of the component , we are making an API call to get
// the initial set of results.
React.useEffect(() => {
fetch(
`https://5da9aa08de10b40014f3745c.mockapi.io/api/v1/feed?page=1&limit=10`
)
.then(res => {
return res.json();
})
.then(data => {
setDataInfiniteScroll(data);
});
}, []);
// Logic to execute when the reached the end of the scroll
// This is a callback which can be passed to InfiniteScroll component, The callback
// will recieve the isVisible value as true when we reach the end of the scroll.
const callbackForInfiniteScroll = React.useCallback(
isVisible => {
let activePage;
setActivePageInfo(c => {
activePage = c;
return c;
});
if (isVisible) {
fetch(
`https://5da9aa08de10b40014f3745c.mockapi.io/api/v1/feed?page=${activePage +
1}&limit=10`
)
.then(res => {
return res.json();
})
.then(data => {
setDataInfiniteScroll(dataInState => [...dataInState, ...data]);
setActivePageInfo(c => c + 1);
});
}
},
[setActivePageInfo]
);
return (
<div className="App">
{/* Just need to pass the callback to invoke, when list reaches end */}
<InfiniteScroll callback={callbackForInfiniteScroll}>
{dataInfiniteScroll &&
dataInfiniteScroll.map(elem => {
/** Box is not a React element. It's a React component **/
return <Box key={elem.id} {...elem} />;
})}
</InfiniteScroll>
</div>
);
}
// It is important to use forwardRef when Components are not React Elements.
// InfiniteScroll component takes the responsibility of initiliazing
// the intersection observer for you. ref should resolve to a DOM element
const Box = React.forwardRef((props, ref) => {
const { avatar, id, name } = props;
return (
<div ref={ref} className="box-item">
<img
style={{ height: '60%', width: '60%', marginBottom: '10px' }}
src={avatar}
alt="no-avatar"
/>
<span>{name}</span>
</div>
);
});
Let' see only the changed code from above. Infinite scroll takes rootMargin as one of the option similar to intersection observer API. Hence any offset can be given as:
rootMargin: "[topOffset], [rightOffset], [bottomOffset], [leftOffset]". Let's see the one of the example having a bottom offset of 680px.
<div className="App">
<h1>Scroll to see Infinite scroll in action</h1>
{/* Just need to pass the callback to invoke, when list reaches end */}
<InfiniteScroll
callback={callbackForInfiniteScroll}
options={{
rootMargin: `0px 0px 680px 0px`,
}}
>
{dataInfiniteScroll &&
dataInfiniteScroll.map(elem => {
return <Box key={elem.id} {...elem} />;
})}
</InfiniteScroll>
</div>
We can also give , top offset, left offset and right offset. So Infinite scroll can be done in any direction. This also support infinite scrolls in scrollable areas apart from viewport. *Need to test more on that.
Props | IsMandatory | Type | Default | Description |
---|---|---|---|---|
callback | Yes | (isVisibile) => { // Logic to trigger // next set of data } |
A callback from consumer, which gets isVisible boolean as the argument. |
|
options | No | object | { rootMargin: '0px 0px 0px 0px' threshold: '0, 1' when: true visibilityCondition: Function } |
These are the almost same options, which we pass to intersectionObserver except threshold which is changed to string type. Done for avoiding extra check for array comparison. |
whenInfiniteScroll | No | boolean | true | The flag which can be used to stop infinitescroll behaviour, when false. can be used to off when , data is no more to be fetched. |
LoadMoreComponent | No | React.ReactElement | Loading More... | This is a ReactElement or React Component which is shown when scroll reaches end |
react-infinite-scroll is using Intersection Observer API. Hence very performant and slick. We can pass almost same options we pass for setting up intersection observer. Here is the link for MDN Intersection observer. You can read about it and understand why it is performant.
The InfiniteScroll Component make use of useInfiniteScroll and useIntersectionObserver hook. React version above >16.8.6 can use this component for infinite scrolling.
Plan is to bundle useIntersectionObserver as a separate package later.
-
TestCases.
-
Other examples
-
Update readme with all the props InfiniteScroll component takes as a table.
-
Example how to stop the infinite scroll and sending the custom components as Loader.
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the tags on this repository.
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details
Thanks goes to these wonderful people (emoji key):
Anil kumar Chaudhary 💻 🤔 🎨 📖 🐛 |