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.

Installing Social Comments

Add Instagram-style social comments to your project with a single command.

Prerequisites

1

Initialize CLI

npx @replyke/cli init
Creates your replyke.json configuration file. Select your platform and styling preference.
2

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 Support

PlatformTailwindInline Styles
React (Web)
React Native
Expo

Switching Styling Variants

1

Delete Current Components

rm -rf src/components/comments-social
2

Update Configuration

Edit replyke.json:
{ "style": "styled" }
3

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