Use entity reactions

Stateful, paginated list of reactions on an entity

Overview

useFetchEntityReactionsWrapper is a stateful wrapper around useFetchEntityReactions that manages pagination and reaction list state for you. Use it to build “who reacted” UIs — for example, a modal showing all users who upvoted a post, with infinite scroll.

By default the hook does not fetch on mount. Set autoFetch: true to start fetching immediately, or call refetch() manually when you’re ready (e.g., when a modal opens).

Usage Example

import { useFetchEntityReactionsWrapper } from "@sublay/react-js";

function WhoReacted({ entityId }: { entityId: string }) {
  const { reactions, loading, hasMore, loadMore, refetch } =
    useFetchEntityReactionsWrapper({
      entityId,
      reactionType: "upvote",
      limit: 20,
      autoFetch: true,
    });

  return (
    <div>
      <ul>
        {reactions.map((r) => (
          <li key={r.id}>{r.user?.username}</li>
        ))}
      </ul>
      {hasMore && (
        <button onClick={loadMore} disabled={loading}>
          Load more
        </button>
      )}
    </div>
  );
}

Parameters

entityId · string · required

The entity to fetch reactions for.

limit · number

Number of reactions per page. Default: 20.

reactionType · ReactionType

Filter to a specific reaction type. When omitted, all reaction types are returned.

sortDir · "asc" | "desc"

Sort direction by creation date. Default: "desc".

autoFetch · boolean

If true, fetch automatically on mount. Default: false.

Returns

reactions · Reaction[]

The current list of fetched reactions. Appended to on each loadMore call.

loading · boolean

true while fetching the initial page or loading more.

hasMore · boolean

true if additional pages are available.

loadMore · () => void

Load the next page of reactions. Appends to the existing list.

refetch · () => void

Reset and re-fetch from page 1.