use-infinite-scroll-hook
v1.0.1
Published
React hook sets infinite scroll for your container.
Downloads
25
Maintainers
Readme
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-hook
Usage
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);