> ## 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.
# Props & API
> ThreadedCommentSection component props and configuration
# 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
```tsx theme={null}
import { ThreadedCommentSection } from './components/comments-threaded';
```
***
## Props Interface
```tsx theme={null}
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.
```tsx theme={null}
```
**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.
```tsx theme={null}
```
***
### `foreignId`
**Type:** `string | undefined | null`
Your external/custom ID for the entity. The component will find or create the Replyke entity automatically.
```tsx theme={null}
```
**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).
```tsx theme={null}
```
**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.
```tsx theme={null}
const [showComments, setShowComments] = useState(false);
```
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.
```tsx theme={null}
```
**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.
```tsx theme={null}
```
Uses the `theme` prop to conditionally render dark or light colors:
```tsx theme={null}
style={{ backgroundColor: theme === 'dark' ? '#1F2937' : '#FFFFFF' }}
```
Ignores this prop. Uses Tailwind's dark mode system instead — add a `dark` class to a parent element:
```tsx theme={null}
```
Requires `darkMode: 'class'` in `tailwind.config.js`.
***
### `children`
**Type:** `React.ReactNode`
Optional content rendered within the comment feed area.
```tsx theme={null}
Join the discussion!
```
***
## Complete Examples
### Minimal Usage
```tsx theme={null}
```
***
### With Dark Mode (Inline Styles)
```tsx theme={null}
function BlogPost({ post }) {
const [isDark, setIsDark] = useState(false);
return (
<>
);
}
```
***
### With Highlighted Comment
```tsx theme={null}
import { useSearchParams } from 'react-router-dom';
function BlogPost({ post }) {
const [searchParams] = useSearchParams();
return (
);
}
// URL: /blog/my-post?commentId=comment_abc123
// → highlights comment_abc123 on load
```
***
### Full Example
```tsx theme={null}
function BlogPost({ postId }) {
const [searchParams] = useSearchParams();
const [showComments, setShowComments] = useState(true);
const [isDark, setIsDark] = useState(false);
const { data: entity } = useFetchEntity({ foreignId: postId });
return (
<>
Be respectful in the discussion
);
}
```
***
## Next Steps
Understand component organization
Explore all features
Customize the component
Installation guide