Infinit scroll component sample with React Hooks

InfinitScroll.tsx

import React, { FC, useEffect, useRef } from 'react';
import ListLoader from '../atoms/ListLoader';

type InfinitScrollProps = {
  loadMore?: () => void;
  hasMore?: boolean;
  isLoading?: boolean;
  threshold?: number;
};

const InfinitScroll: FC<InifinitScrollProps> = ({
  loadMore = () => {},
  hasMore = false,
  isLoading = false,
  threshold = 150,
  children,
}) => {
  const ref = useRef() as React.MutableRefObject<HTMLDivElement>;
  const handleScroll = () => {
    if (!ref.current || !hasMore || isLoading) return;
    const { clientHeight } = ref.current;

    if (
      window.innerHeight + document.documentElement.scrollTop + threshold >
      clientHeight
    ) {
      loadMore();
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll, true);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div ref={ref} role="feed" aria-busy={isLoading}>
      {children}
      {isLoading && <ListLoader />}
    </div>
  );
};

export default InfinitScroll;