Social Comments Features
Instagram-style comment system features.Core Features
Single-Level Nesting
Maximum 2 levels: comments and replies. Keeps conversations simple and easy to follow.Heart/Like System
Positive-only engagement with heart icons.- Heart button with like count display
- One like per user per comment
- Unlike at any time
- No downvotes — positive community focus
Sorting
Built-in Top/New/Old sorting that users can switch on the fly.- Top — Most liked comments first
- New — Newest comments first
- Old — Oldest comments first
@ Mentions
Tag users with@username.
- Autocomplete suggestions as you type
- Clickable mentions link to user profiles (via
otherUserClickCallback) - Mentioned users receive notifications (if enabled)
- Works in both comments and replies
Edit & Delete
Comment authors can edit or delete their own comments.- Edit: Inline text editing, shows “edited” indicator
- Delete: Confirmation modal, soft delete preserves thread structure
Reporting
Built-in reporting for inappropriate content.- Click “Report” from the action menu
- Select a reason and submit
- Reports appear in the Sublay Dashboard for admin review
Loading States
Skeleton loaders while fetching comments — prevents layout shift and provides visual feedback.Empty States
Friendly placeholder when no comments exist. Customizeno-comments-placeholder.tsx to change messaging or add illustrations.
Real-Time Updates
Comments automatically update when other users post. No configuration required — powered by@sublay/react-js subscriptions.
Dark Mode
Full dark mode support. Inline Styles Variant:GIF Support (Optional)
Enable a GIF picker via the Sublay Dashboard. Add a Giphy API key and GIF search appears in comment forms automatically — no code changes needed.Feature Matrix
Next Steps
Props & API
Props reference
Customization
Customize components
File Structure
File organization
Installation
Installation guide