React useInfiniteScroll hook for fetching the data when user reaches end of the screen
npm install react-use-infinite-scrollbash
npm install react-use-infinite-scroll
` About
The library exposes simple API, you just register a callback that you want to fire every time the user reaches the end of the screen, that callback is then attached as a listener to window event 'scroll'. You don't have to worry about cleaning up after yourself that is all done under the hood when the component that consumes this hook unmounts
`tsx
useInfiniteScroll: (callback: () => void) => void
`Usage
`tsx
import React, { useEffect } from 'react';
import { useInfiniteScroll } from 'react-use-infinite-scroll'; import { useSocialItemsContext } from './context/social-items';
import { SocialEntity } from './shared/models';
import { BaseLayout, Card } from './components';
const App: React.FC = (): JSX.Element => {
const {
state: { items, currentPage },
setCurrentPage,
} = useSocialItemsContext();
const loadMore = () => setCurrentPage(currentPage + 1);
useEffect(() => {
useInfiniteScroll(loadMore);
}, [])
return (
{items.map((item: SocialEntity): JSX.Element => (
))}
);
};
export default App;
``