use-infinite-scroll-hook v1.0.1

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);