useCommentSectionData
Overview
The useCommentSectionData
hook provides a comprehensive solution for managing comment sections associated with entities. Unlike individual hooks such as useFetchComments
or useCreateComment
, this hook combines functionalities like fetching, creating, updating, deleting, and managing comment states (e.g., sorting, replying). It is ideal for implementing fully-featured comment sections with advanced state management.
Usage Example
import { useCommentSectionData } from "@replyke/react-js";
function CommentSection({ entityId }: { entityId: string }) {
const {
comments,
entityCommentsTree,
loading,
hasMore,
sortBy,
setSortBy,
loadMore,
createComment,
updateComment,
deleteComment,
repliedToComment,
setRepliedToComment,
showReplyBanner,
setShowReplyBanner,
} = useCommentSectionData({ entityId, limit: 15 });
const handleAddComment = async () => {
try {
await createComment({
content: "This is a new comment!",
mentions: [],
});
} catch (error) {
console.error("Failed to add comment:", error.message);
}
};
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>
)}
{showReplyBanner && <p>Replying to {repliedToComment?.id}</p>}
<button onClick={handleAddComment}>Add Comment</button>
</div>
);
}
Parameters & Returns
Parameters
The hook accepts an object with the fields below. At least one of the first 4 fields must be provided (entityId
/referenceId
/shortId
/entity
):
Parameter | Type | Required | Description |
---|---|---|---|
entityId | string | undefined | null | No | The ID of the entity in Replyke’s system. |
referenceId | string | undefined | null | No | The original item’s ID if integrated with an external dataset, or a static value (e.g., “about-page”). |
shortId | string | undefined | null | No | The unique short ID of the entity. |
entity | string | undefined | null | No | A complete Entity object. |
createIfNotFound | string | undefined | null | No | An optional flag which instructs Replyke to create an entity if one isn’t found. |
limit | number | No | The number of comments to fetch per page. Default is 15 . |
defaultSortBy | CommentsSortByOptions | No | The default sorting criteria for comments (e.g., new , top ). |
callbacks | SocialStyleCallbacks | No | Optional callbacks for handling events like login requirements. |
highlightedCommentId | string | null | No | The ID of a comment to highlight (e.g., for linking or deep linking). |
Returns
The hook returns an object with the following fields:
Return Value | Type | Description |
---|---|---|
entityId | string | undefined | null | The ID of the associated entity. |
callbacks | SocialStyleCallbacks | The callbacks passed into the hook. |
entityCommentsTree | EntityCommentsTree | The tree structure of the comments associated with the entity. |
comments | CommentType[] | The list of root-level comments fetched so far. |
newComments | CommentType[] | Newly added root-level comments. |
loading | boolean | Indicates whether comments are being loaded. |
hasMore | boolean | Indicates whether there are more comments to fetch. |
submittingComment | boolean | Indicates whether a comment is currently being submitted. |
loadMore | () => void | A function to fetch the next page of comments. |
sortBy | CommentsSortByOptions | null | The current sorting criteria for comments. |
setSortBy | (newSortBy: CommentsSortByOptions) => void | A function to update the sorting criteria. |
pushMention | UserLean | null | The user being mentioned in a reply. |
setPushMention | (user: UserLean | null) => void | A function to set the user being mentioned. |
previousPushMention | UserLean | null | The previously mentioned user. |
selectedComment | CommentType | null | The currently selected comment. |
setSelectedComment | (newSelectedComment: CommentType | null) => void | A function to set the selected comment. |
repliedToComment | Partial<CommentType> | null | The comment being replied to. |
setRepliedToComment | (newRepliedToComment: CommentType | null) => void | A function to set the replied-to comment. |
showReplyBanner | boolean | Indicates whether the reply banner is shown. |
setShowReplyBanner | (newState: boolean) => void | A function to toggle the reply banner. |
addCommentsToTree | (newComments: CommentType[], newlyAdded?: boolean) => void | A function to add comments to the tree structure. |
removeCommentFromTree | (commentId: string) => void | A function to remove a comment from the tree structure. |
createComment | (props: { content: string; mentions: Mention[] }) => Promise<void> | A function to create a new comment. |
updateComment | (props: { commentId: string; content: string }) => Promise<void> | A function to update an existing comment. |
deleteComment | (props: { commentId: string }) => Promise<void> | A function to delete a comment. |
highlightedComment | { comment: CommentType; parentComment: CommentType | null } | null | The highlighted comment and its parent (if any). |