Skip to main content

​
Overview

useFetchCommentReactionsWrapper is a stateful wrapper around useFetchCommentReactions that manages pagination and reaction list state for you. Use it to build “who reacted” UIs for comments — for example, a popover showing users who liked a specific comment. 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 popover opens).

​
Usage Example

import { useFetchCommentReactionsWrapper } from "@replyke/react-js";

function CommentReactions({ commentId }: { commentId: string }) {
  const { reactions, loading, hasMore, loadMore, refetch } =
    useFetchCommentReactionsWrapper({
      commentId,
      reactionType: "like",
      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

​
commentId
string
required
The comment 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.