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.
Add Instagram-style social comments to your project with a single command.
Prerequisites
Initialize CLI
Creates your replyke.json configuration file. Select your platform and styling preference. Install Dependencies
React (Web):npm install @replyke/react-js @replyke/ui-core-react-js
React Native:npm install @replyke/react-native @replyke/ui-core-react-native
Expo:npm install @replyke/expo @replyke/ui-core-react-native
See the CLI Setup Guide for details.
Installation Command
npx @replyke/cli add comments-social
What Gets Installed
The CLI copies approximately 23 files into your project:
src/components/comments-social/
├── index.ts # Barrel export (entry point)
├── components/ # UI components (~18 files)
│ ├── social-comment-section.tsx # Main component
│ ├── new-comment-form.tsx # Comment input form
│ ├── reply-banner.tsx # Reply indicator
│ ├── mention-suggestions.tsx # @ mention autocomplete
│ ├── sort-by-button.tsx # Top/New/Old sorting
│ ├── 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
│ │ ├── heart-button.tsx # Like button
│ │ └── replies.tsx
│ └── modals/
│ ├── report-comment-modal/ # Report modal
│ └── delete-comment-modal/ # Delete confirmation
├── hooks/
│ ├── use-social-comments.tsx # Main comment logic
│ └── use-ui-state.tsx # UI state management
├── utils/
│ └── prop-comparison.ts
└── context/
└── ui-state-context.tsx
Using the Component
import { SocialCommentSection } from './components/comments-social';
function Post({ post }) {
return (
<div>
<img src={post.image} alt={post.caption} />
<p>{post.caption}</p>
<SocialCommentSection entityId={post.id} />
</div>
);
}
Make sure your app is wrapped with <ReplykeProvider>. See the Quick Start Guide for setup details.
| Platform | Tailwind | Inline Styles |
|---|
| React (Web) | ✅ | ✅ |
| React Native | ✅ | ✅ |
| Expo | ✅ | ✅ |
Switching Styling Variants
Delete Current Components
rm -rf src/components/comments-social
Re-install
npx @replyke/cli add comments-social
This replaces your component files. Back up any customizations first.
Next Steps
Props & API
Learn about available props
Customization
Customize the component
Features
Explore all features
File Structure
Understand file organization