Use entity comments

Manage a paginated, sorted comment tree for an entity

Overview

useEntityComments is a lower-level hook that fetches and manages a paginated comment tree for a given entity ID. It is used internally by CommentSectionProvider. Use it directly when you need comment tree management without the full provider.

For most use cases, use CommentSectionProvider + useCommentSection instead. See Comment Section.

Usage Example

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

function CommentTree({ entityId }: { entityId: string }) {
  const { comments, loading, hasMore, loadMore } = useEntityComments({ entityId });

  return (
    <>
      {comments.map((c) => <div key={c.id}>{c.content}</div>)}
      {hasMore && <button onClick={loadMore}>Load more</button>}
    </>
  );
}

Props

entityId · string | null | undefined · required

The entity ID to fetch comments for.

limit · number

Comments per page. Default: 10.

defaultSortBy · string

Initial sort: "createdAt", "top", or "controversial". Default: "createdAt". "new"/"old" are deprecated aliases for "createdAt" (removed in v8).

defaultSortDir · "asc" | "desc"

Initial sort direction for sortBy: "createdAt". Default: "desc" (newest first).

include · string | string[]

Populate related data. Accepted values: "user", "entity", "space", "parent".

Return Values

entityCommentsTree · EntityCommentsTree

Flat map of all comments and their replies, keyed by comment ID.

comments · Comment[]

Paginated root-level comments (not newly added ones).

newComments · Comment[]

Newly added root comments from this session, sorted newest-first.

loading · boolean

true during fetches.

hasMore · boolean

true when more pages are available.

sortBy · CommentsSortByOptions | null

Current sort order.

setSortBy · (newSortBy: CommentsSortByOptions) => void

Changes sort order and resets to page 1.

sortDir · "asc" | "desc"

Current sort direction for sortBy: "createdAt".

setSortDir · (newSortDir: "asc" | "desc") => void

Changes sort direction and resets to page 1.

loadMore · () => void

Loads the next page.

addCommentsToTree · (comments?: Comment[], newlyAdded?: boolean) => void

Inserts comments into the tree. Pass newlyAdded: true for freshly submitted comments.

removeCommentFromTree · ({ commentId }) => void

Removes a comment from the tree.

markCommentAsDeleted · ({ commentId }) => void

Marks a comment as deleted (Reddit-style placeholder) without removing it from the tree.