Nested Comments

Example

Loading thread...

Usage

		<script>
	import { NestedComments } from '@foxui/social';

	const comments = [
		{
			author: { displayName: 'Alice', handle: 'alice', avatar: '...' },
			htmlContent: '<p>Great post!</p>',
			createdAt: new Date().toISOString(),
			replyCount: 1,
			likeCount: 5,
			replies: [
				{
					author: { displayName: 'Bob', handle: 'bob', avatar: '...' },
					htmlContent: '<p>I agree!</p>',
					createdAt: new Date().toISOString(),
					replyCount: 0,
					likeCount: 2
				}
			]
		}
	];
</script>

<NestedComments {comments} />

Features

Collapsible threads — click the left border or avatar to collapse/expand
Recursive nesting up to 5 levels deep
Relative timestamps
Reply and like counts
Supports embeds (images, videos, links) on each comment

API Reference

NestedComments

Reddit-style threaded comments with collapsible replies. Uses the Post component internally for each comment.

Property Type Description

comments required

object

Array of top-level comments. Each comment can have nested replies via the replies field.

actions

object

Action buttons config. Pass an object for the same buttons on every comment, or a function to customize per comment. Default: —

showSensitive

boolean

Whether to show the sensitive content overlay on flagged embeds. Default: true

extraEmbeds

object

Snippet for rendering custom embeds per comment. Receives the comment data as argument. Default: —

onclickhandle

function

Callback when a user handle is clicked. If not set, handles render as links. Default: —

target

string

The target attribute for all links. Default: '_blank'

maxDepth

number

Maximum nesting depth for replies. Default: 4

logo

object

Logo snippet shown in the post header. Default: —

Property

comments

actions

showSensitive

extraEmbeds

onclickhandle

target

maxDepth

logo