Carregando…

Infinite Scroll

Layout

IntersectionObserver sentinel wrapper that triggers onLoadMore when visible.

Infinite Scroll — load more on sentinel intersection

Item #1

Item #2

Item #3

Item #4

Item #5

Item #6

Item #7

Item #8

Instalação via CLI

$ npx kikitocn add infinite-scroll

Exemplo de uso

Infinite ScrollExample.tsx

import { InfiniteScroll } from "@/components/ui/cn/infinite-scroll/InfiniteScroll";

export function InfiniteScrollExample() {
  return (
    <InfiniteScroll />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children*`	`ReactNode`	—	Itens já carregados
`onLoadMore*`	`() => void`	—	Callback ao atingir o sentinel
`hasMore*`	`boolean`	—	Indica se há mais itens para carregar
`isLoading`	`boolean`	`false`	Estado de carregamento em curso
`threshold`	`number`	`0`	Margem de disparo do IntersectionObserver
`loader`	`ReactNode`	—	Componente exibido enquanto carrega
`endMessage`	`ReactNode`	—	Mensagem exibida quando não há mais itens
`className`	`string`	—	Classes CSS extras

Voltar para Layout

Carregando…