Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.replyke.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Social Comments File Structure

Approximately 23 files organized for simplicity and clarity.

​
Directory Tree

src/components/comments-social/
├── index.ts                              # Barrel export (entry point)
├── components/
│   ├── social-comment-section.tsx        # Main component
│   ├── new-comment-form.tsx              # Comment/reply input
│   ├── reply-banner.tsx                  # Shows who you're replying to
│   ├── mention-suggestions.tsx           # @ mention autocomplete
│   ├── sort-by-button.tsx               # Top/New/Old sort control
│   ├── comments-feed/
│   │   ├── comments-feed.tsx             # Feed container
│   │   ├── loaded-comments.tsx           # Comment list
│   │   ├── fetching-comments-skeletons.tsx
│   │   ├── no-comments-placeholder.tsx
│   │   └── comment/
│   │       ├── comment.tsx              # Individual comment + replies
│   │       ├── heart-button.tsx         # Like button with count
│   │       └── replies.tsx              # Reply list
│   └── modals/
│       ├── report-comment-modal/
│       │   ├── report-comment-modal.tsx
│       │   ├── modal-background.tsx
│       │   └── report-modal-content.tsx
│       └── delete-comment-modal/
│           └── delete-comment-modal.tsx
├── hooks/
│   ├── use-social-comments.tsx           # Main comment logic and callbacks
│   └── use-ui-state.tsx                  # UI state (modals, active reply)
├── utils/
│   └── prop-comparison.ts               # Memoization helpers
└── context/
    └── ui-state-context.tsx             # Provides UI state to components

​
Key Files

​
social-comment-section.tsx — Main Component

The entry component. Edit this to modify the overall layout, add headers or footers, or change how the component is structured.

​
new-comment-form.tsx — Comment Input

Handles both top-level comment input and reply input (reused for both). Edit to:
  • Customize placeholder text
  • Change submit button styles
  • Add character limits

​
heart-button.tsx — Like Button

The heart icon and like count. Edit to:
  • Change the heart icon color or style
  • Modify the like count display
  • Add animations on like

​
sort-by-button.tsx — Sort Control

The Top/New/Old sort switcher. Edit to:
  • Rename sort options
  • Remove sort options you don’t need
  • Change button styles

​
use-social-comments.tsx — Main Hook

Contains all comment logic and the key behavioral callbacks you’ll want to customize:
  • loginRequiredCallback — Called when an unauthenticated user tries to comment
  • usernameRequiredCallback — Called when a user without a username tries to comment
  • currentUserClickCallback — Called when a user clicks their own profile
  • otherUserClickCallback(userId, foreignId) — Called when a user clicks another user’s profile

​
Key Differences from Threaded Comments

ThreadedSocial
vote-buttons.tsxheart-button.tsx
Threading lines + indentationFlat design
Unlimited nestingMax 2 levels
No sort buttonsort-by-button.tsx
Complex thread collapseSimple reply expansion

​
Common Customizations

​
Change Heart Color

// Edit: components/social/comments-feed/comment/heart-button.tsx
<span style={{ color: '#EC4899' }}>  {/* Pink heart */}
  ❤️
</span>

​
Modify Sort Options

// Edit: components/social/social-comment-section.tsx
const sortOptions = ['top', 'new'];  // Remove 'old' option

​
Customize Empty State

// Edit: components/social/comments-feed/no-comments-placeholder.tsx
<p>No comments yet. Be the first! 🎉</p>

​
Next Steps

Features

Feature overview

Customization

Customize colors, layout, and functionality

Props & API

Props reference

Installation

Installation guide