Skip to content
TanStackIntent
TanStack Intent/Registry/denwa-web-shared

denwa-web-shared

A shared library for Next.js App Router projects containing reusable components, hooks, schemas, and utilities.

infinity-list

core
82 linesSource

Implement a continuous feed of items using InfinityList component. Load when implementing infinite scroll, lazy loading, or pagination lists.

denwa-web-shared — Implement infinite lists

Setup

tsx
import { InfinityList } from 'denwa-web-shared/client';

<InfinityList
  isNext={hasNextPage}
  onIntersection={fetchNextPage}
  intersectionElement={() => <div>Loading...</div>}
>
  {items.map((item) => (
    <Item key={item.id} {...item} />
  ))}
</InfinityList>;

Core Patterns

Infinite scroll list

tsx
import { InfinityList } from 'denwa-web-shared/client';
import { Spinner } from '@/components/spinner';

export const Feed = ({ items, hasNext, loadMore }) => {
  return (
    <InfinityList
      isNext={hasNext}
      onIntersection={loadMore}
      intersectionElement={() => <Spinner />}
      intersectionElementClassName="py-4"
    >
      {items.map((item) => (
        <FeedItem key={item.id} data={item} />
      ))}
    </InfinityList>
  );
};

Common Mistakes

MEDIUM Incorrect handling of intersection triggers

Wrong:

tsx
// Manual intersection observer implementation

Correct:

tsx
import { InfinityList } from 'denwa-web-shared/client';

<InfinityList
  isNext={hasNextPage}
  onIntersection={fetchNextPage}
  intersectionElement={() => <Spinner />}
>
  {items}
</InfinityList>;

Agents might manually write intersection observers instead of using InfinityList.

Source: maintainer interview