> ## 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.
# Social Comments Props
> SocialCommentSection props and API
# Social Comments Props
The `SocialCommentSection` component follows the same **minimal props philosophy** as all Replyke components. It works with just `entityId` and offers optional props for specific needs.
***
## Component Import
```tsx theme={null}
import { SocialCommentSection } from './components/comments-social';
```
***
## Props Interface
```tsx theme={null}
interface SocialCommentSectionProps {
// 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. Use when you already have it from `useFetchEntity` or similar hooks.
### `entityId`
**Type:** `string | undefined | null`
The internal Replyke ID for the entity.
### `foreignId`
**Type:** `string | undefined | null`
Your external/custom ID for the entity. The component finds or creates the Replyke entity automatically. This is the most common option.
### `shortId`
**Type:** `string | undefined | null`
A short, human-readable identifier if you've set one on the entity.
**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 modal, drawer, or bottom sheet.
```tsx theme={null}
```
***
### `highlightedCommentId`
**Type:** `string | undefined | null`
ID of a specific comment to highlight on load. The component scrolls to it and applies a highlight that fades after a few seconds.
```tsx theme={null}
```
***
### `theme`
**Type:** `'light' | 'dark'` — **Default:** `'light'`
**Only for the inline styles variant.** Sets the color theme for the component.
```tsx theme={null}
```
Ignores this prop. Use Tailwind's dark mode system instead:
```tsx theme={null}
```
Requires `darkMode: 'class'` in `tailwind.config.js`.
***
### `children`
**Type:** `React.ReactNode`
Optional content rendered within the comment section.
```tsx theme={null}
Share your thoughts!
```
***
## Usage Examples
### Minimal
```tsx theme={null}
```
***
### With Dark Mode (Inline Styles)
```tsx theme={null}
function PhotoPost({ photo }) {
const [isDark, setIsDark] = useState(false);
return (
<>
);
}
```
***
### With Highlighted Comment
```tsx theme={null}
import { useSearchParams } from 'react-router-dom';
function PhotoPost({ photo }) {
const [searchParams] = useSearchParams();
return (
);
}
```
***
### In a React Native Bottom Sheet
```tsx theme={null}
import BottomSheet from '@gorhom/bottom-sheet';
function PhotoScreen({ photo }) {
const [isOpen, setIsOpen] = useState(false);
return (
<>
setIsOpen(true)} />
);
}
```
***
## Next Steps
Component organization
Feature overview
Customize the component
Installation guide