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.

​
Threaded Comments Props

The ThreadedCommentSection component follows a minimal props philosophy. It works with just entityId and offers optional props for specific needs.

​
Component Import

import { ThreadedCommentSection } from './components/comments-threaded';

​
Props Interface

interface ThreadedCommentSectionProps {
  // Entity identification (provide ONE of these)
  entity?: Entity | undefined | null;
  entityId?: string | undefined | null;
  foreignId?: string | undefined | null;
  shortId?: string | undefined | null;

  // Optional features
  isVisible?: boolean;
  highlightedCommentId?: string | undefined | null;
  theme?: 'light' | 'dark';   // Only for inline styles variant
  children?: React.ReactNode;
}

​
Entity Identification

Provide one of these to identify which entity the comments belong to:

​
entity

Type: Entity | undefined | null A complete Entity object. 
<ThreadedCommentSection
  entity={{
    id: "entity_123",
    projectId: "proj_456",
    foreignId: "post-789",
    // ... other entity fields
  }}
/>
Use when: You already have the full entity object from useFetchEntity or similar hooks.

​
entityId

Type: string | undefined | null The internal Replyke ID for the entity. 
<ThreadedCommentSection entityId="entity_123" />

​
foreignId

Type: string | undefined | null Your external/custom ID for the entity. The component will find or create the Replyke entity automatically. 
<ThreadedCommentSection foreignId="blog-post-789" />
Use when: You’re using your own IDs and haven’t fetched the Replyke entity yet. This is the most common option.

​
shortId

Type: string | undefined | null A short, human-readable identifier (if you’ve set one on the entity). 
<ThreadedCommentSection shortId="my-first-post" />
You only need ONE of these props. Use whichever fits your data model best.

​
Optional Props

​
isVisible

Type: boolean — Default: true Controls whether the comment section is visible. Useful when rendering inside a drawer, modal, or conditional layout. 
const [showComments, setShowComments] = useState(false);

<ThreadedCommentSection
  entityId="post_123"
  isVisible={showComments}
/>
Ensures event listeners are only active when the component is visible, improving performance.

​
highlightedCommentId

Type: string | undefined | null ID of a specific comment to highlight when the section loads. The component scrolls to it and applies a highlight that fades after a few seconds. 
<ThreadedCommentSection
  entityId="post_123"
  highlightedCommentId="comment_456"
/>
Use cases: Deep-linking from notifications, jumping to a comment via URL param.

​
theme

Type: 'light' | 'dark' — Default: 'light' Only for the inline styles variant. Sets the color theme for the entire comment section. 
<ThreadedCommentSection
  entityId="post_123"
  theme={isDark ? 'dark' : 'light'}
/>
Uses the theme prop to conditionally render dark or light colors:
style={{ backgroundColor: theme === 'dark' ? '#1F2937' : '#FFFFFF' }}

​
children

Type: React.ReactNode Optional content rendered within the comment feed area. 
<ThreadedCommentSection entityId="post_123">
  <div className="text-center text-gray-500 my-4">
    Join the discussion!
  </div>
</ThreadedCommentSection>

​
Complete Examples

​
Minimal Usage

<ThreadedCommentSection foreignId="blog-post-123" />

​
With Dark Mode (Inline Styles)

function BlogPost({ post }) {
  const [isDark, setIsDark] = useState(false);

  return (
    <>
      <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
      <ThreadedCommentSection
        foreignId={post.id}
        theme={isDark ? 'dark' : 'light'}
      />
    </>
  );
}

​
With Highlighted Comment

import { useSearchParams } from 'react-router-dom';

function BlogPost({ post }) {
  const [searchParams] = useSearchParams();

  return (
    <ThreadedCommentSection
      foreignId={post.id}
      highlightedCommentId={searchParams.get('commentId')}
    />
  );
}

// URL: /blog/my-post?commentId=comment_abc123
// → highlights comment_abc123 on load

​
Full Example

function BlogPost({ postId }) {
  const [searchParams] = useSearchParams();
  const [showComments, setShowComments] = useState(true);
  const [isDark, setIsDark] = useState(false);
  const { data: entity } = useFetchEntity({ foreignId: postId });

  return (
    <>
      <button onClick={() => setShowComments(!showComments)}>
        {showComments ? 'Hide' : 'Show'} Comments
      </button>

      <ThreadedCommentSection
        entity={entity}
        isVisible={showComments}
        highlightedCommentId={searchParams.get('commentId')}
        theme={isDark ? 'dark' : 'light'}
      >
        <div className="text-center text-sm text-gray-500 my-2">
          Be respectful in the discussion
        </div>
      </ThreadedCommentSection>
    </>
  );
}

​
Next Steps

File Structure

Understand component organization

Features

Explore all features

Customization

Customize the component

Installation

Installation guide