Paginated List Component

A reusable paginated list component that fetches and displays items in pages, with support for loading states and end-of-list indicators, based on Paginated and Cursor from the Lens React SDK.

Installation

Usage

import { useState } from "react";
import { Cursor, PageSize, usePostReactions, postId } from "@lens-protocol/react";
import { PaginatedList } from "@/components/common/paginated-list";
import { LensAccountListItem } from "@/components/account/lens-account-list-item";
import { LensAccountListItemSkeleton } from "@/components/account/lens-account-list-item-skeleton";

const [cursor, setCursor] = useState<Cursor | null>(null);

const { data, loading, error } = usePostReactions({
  post: postId("1n8hs1aqb4k53f8vsvc"),
  pageSize: PageSize.Fifty,
  cursor,
});

return (
  <PaginatedList
    data={data}
    loading={loading}
    error={error}
    setCursor={setCursor}
    renderItem={item => (
      <LensAccountListItem
        account={item.account}
        key={item.account.address}
      />
    )}
    renderSkeleton={() => (
      <div className={"flex flex-col gap-0.5 max-h-full overflow-x-hidden"}>
        {Array.from({ length: 3 }).map((_, index) => (
          <LensAccountListItemSkeleton key={index} />
        ))}
      </div>
    )}
  />
);

Link Preview Hooks