useInfiniteScroll

Hook para detectar o final de uma lista com IntersectionObserver.

Visão Geral

O useInfiniteScroll é um hook que utiliza a API IntersectionObserver para detectar quando um elemento (como o último item de uma lista) entra na viewport, permitindo o carregamento incremental de conteúdo.

Exemplo de Uso

import { useInfiniteScroll } from "@convertcompany/ui/hooks";

export default function Example() {
  const [data, setData] = useState<string[]>([]);
  const [page, setPage] = useState(0);
  const [loading, setLoading] = useState(false);

  const loadMore = () => {
    setLoading(true);
    setTimeout(() => {
      setData((prev) => [...prev, `Item ${prev.length + 1}`]);
      setPage((prev) => prev + 1);
      setLoading(false);
    }, 1000);
  };

  const lastElementRef = useInfiniteScroll({ loading, onEndReached: loadMore });

  return (
    <ul>
      {data.map((item, i) => (
        <li key={i}>{item}</li>
      ))}
      <li ref={lastElementRef}></li>
    </ul>
  );
}

Retorno

PropriedadeTipo
lastElementRefRef que deve ser atribuído ao último elemento da lista para acionar a detecção.
React.RefCallback<HTMLElement>

Parâmetros

PropriedadeTipo
loadingIndica se um carregamento está em andamento.
boolean
onEndReachedFunção chamada quando o elemento entra em viewport.
() => void
rootElemento raiz usado pelo IntersectionObserver.
Element
null
rootMarginMargem em torno do elemento raiz. Padrão é '0px'.
string
thresholdPercentual de interseção necessário para disparar a callback.
number

Considerações

  • Evite usar esse hook com listas que atualizam em tempo real sem controle de loading.
  • Ideal para aplicações de scroll infinito com controle de estado externo.