Use Entity Comments

useEntityComments

Overview

The useEntityComments hook provides a higher-level abstraction for fetching and managing comments related to a specific entity. It handles pagination, sorting, and comment tree structure, allowing you to easily build a threaded comment UI. It’s especially useful when you want to render nested replies and dynamically manage additions or deletions in a structured way.

Usage Example

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

function EntityComments({ entityId }: { entityId: string }) {
  const {
    comments,
    newComments,
    entityCommentsTree,
    loading,
    hasMore,
    sortBy,
    setSortBy,
    loadMore,
    addCommentsToTree,
    removeCommentFromTree,
  } = useEntityComments({ entityId, limit: 10, defaultSortBy: "new" });

  return (
    <div>
      <select
        value={sortBy}
        onChange={(e) => setSortBy(e.target.value as "new" | "top")}
      >
        <option value="new">Newest</option>
        <option value="top">Top</option>
      </select>

      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>{comment.content}</li>
        ))}
      </ul>

      {loading && <p>Loading...</p>}
      {hasMore && !loading && <button onClick={loadMore}>Load More</button>}
    </div>
  );
}

Parameters & Returns

Parameters

The hook accepts an object with the following fields:

entityId · string \

null`

limit · number

The number of comments to fetch per page. Default is 10.

defaultSortBy · CommentsSortByOptions

The default sorting criteria for comments (e.g., "new", "top").

Returns

The hook returns an object with the following fields:

entityCommentsTree · EntityCommentsTree

The structured tree of comments, keyed by comment ID.

comments · Comment[]

The list of root-level comments (non-new).

newComments · Comment[]

Comments recently added during the session.

loading · boolean

Indicates whether comments are currently loading.

hasMore · boolean

Whether there are more comments available to fetch.

sortBy · CommentsSortByOptions

Current sorting method for the comments ("new" or "top").

setSortBy · (newSortBy: CommentsSortByOptions) => void

Updates the sort order for comments.

loadMore · () => void

Loads the next page of comments, if available.

addCommentsToTree · (newComments: Comment[] \

undefined, newlyAdded?: boolean) => void`

removeCommentFromTree · (commentId: string) => void

Removes a comment (and its descendants) from the tree structure.