React Hook Infinite Scroll
A simple React Hook implements infinite scrolling for your component. Please pass a ref container and a load function to the hook. The hook calls your load function when the scroll hits the bottom. If you need to call function when the scroll hits the top just use flex-direction: column-reverse for your container.
Installation
#npm
$ npm install use-infinite-scroll-hook
#yarn
$ yarn add use-infinite-scroll-hookUsage
If you need to scroll up. Use flex-direction: collumn-reverse on your container.
import React from 'react';
import { useRef } from 'react';
import { useInfiniteScrollHook } from 'use-infinite-scroll-hook/lib';
export default function App() {
const targetContainer = useRef<HTMLDivElement>(null);
const loadData = () => console.log('load');
useInfiniteScrollHook(targetContainer, loadData);
return (
<div className="App">
<div ref={container} className='container'> //style={{display: 'flex', flexDirection: 'column-reverse'}} for scroll up
{... someBigData ...}
</div>
</div>
);
}Params
refContainer: RefObject (required);onLoad: Function (required);