forever-scroll

screen-enter.js

import { createRef, useEffect, useState } from 'react';

export function useScreenEnter(callback) {
  const scrollRef = createRef();
  const loaderRef = createRef();

  const [more, hasMore] = useState(true);

  function activate() {
    if (
      loaderRef.current &&
      isInViewPort(
        scrollRef.current.getBoundingClientRect(),
        loaderRef.current.getBoundingClientRect()
      ) &&
      more
    ) {
      callback();
    }
  }

  useEffect(() => {
    if (!scrollRef.current) return;

    const { current } = scrollRef;

    current.addEventListener('scroll', activate);
    return () => current.removeEventListener('scroll', activate);
  });

  return {
    scrollRef,
    loaderRef,
    hasMore
  };
}

function isInViewPort(scrollerRect, loaderRect) {
  if (
    Math.round(scrollerRect.bottom) >= Math.round(loaderRect.bottom) &&
    loaderRect.top >= 0 &&
    loaderRect.left >= 0
  )
    return true;

  return false;
}

usage.js

const [meta, setMeta] = useState({ last: false });
const [content, setContent] = useState([]);

const { scrollRef, loaderRef, hasMore } = useScreenEnter(() => {
  // do something to get more 
  const setItems = async items => {
    const { content: newContent, ...meta } = items;
    setMeta(meta);
    hasMore(!meta.last);
    setContent([...content, ...newContent]);
  };
});