> ## 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.

# Adding Features

> Add custom functionality to components

# Adding Features

Extend components with custom behavior — confirmations, analytics, integrations, and more.

***

## Add Confirmation Before Delete

```tsx theme={null}
// File: comment-menu-modal-owner.tsx

const handleDelete = () => {
  if (window.confirm('Are you sure you want to delete this comment?')) {
    // existing delete logic
    deleteComment(comment.id);
  }
};
```

Or use a custom modal by replacing the `window.confirm` with your modal component.

***

## Add Character Counter to Comment Form

```tsx theme={null}
// File: new-comment-form.tsx

const [text, setText] = useState('');
const MAX_LENGTH = 500;

return (
  <div>
    <textarea
      value={text}
      onChange={(e) => setText(e.target.value)}
      maxLength={MAX_LENGTH}
      placeholder="Leave a comment..."
    />
    <div className="text-sm text-gray-400 text-right">
      {text.length} / {MAX_LENGTH}
    </div>
    <button type="submit">Comment</button>
  </div>
);
```

***

## Add Analytics Tracking

```tsx theme={null}
// File: vote-buttons.tsx

const handleUpvote = () => {
  analytics.track('Comment Upvoted', {
    commentId: comment.id,
    entityId: entity.id,
  });
  // existing upvote logic
};
```

```tsx theme={null}
// File: new-comment-form.tsx

const handleSubmit = async () => {
  await submitComment(text);
  analytics.track('Comment Posted', { entityId: entity.id });
};
```

***

## Add Custom User Badges

```tsx theme={null}
// File: single-comment.tsx

<div className="flex items-center gap-2">
  <span className="font-semibold">{author.name}</span>
  {author.isPro && (
    <span className="px-2 py-0.5 bg-amber-500 text-white text-xs rounded-full">
      PRO
    </span>
  )}
  {author.isAdmin && (
    <span className="px-2 py-0.5 bg-purple-600 text-white text-xs rounded-full">
      Admin
    </span>
  )}
</div>
```

***

## Auto-Collapse Old Threads

```tsx theme={null}
// File: comment-thread.tsx

const [isCollapsed, setIsCollapsed] = useState(() => {
  const sevenDaysAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
  return new Date(comment.createdAt).getTime() < sevenDaysAgo;
});
```

***

## Navigate on User Click

The hooks expose callback props for user interactions. Wire them to your router:

```tsx theme={null}
// File: hooks/use-threaded-comments.tsx

const otherUserClickCallback = (userId: string, foreignId?: string) => {
  // Navigate to user profile
  router.push(`/users/${foreignId || userId}`);
};

const loginRequiredCallback = () => {
  // Redirect to login
  router.push('/login?returnTo=' + window.location.pathname);
};
```

***

## Add Pinned Comment

Show a pinned comment above the feed:

```tsx theme={null}
// File: threaded-comment-section.tsx

return (
  <div>
    <NewCommentForm />

    {pinnedComment && (
      <div className="border-l-4 border-blue-500 pl-4 mb-4 bg-blue-50 dark:bg-blue-950 rounded-r-lg py-2">
        <span className="text-xs font-semibold text-blue-600 uppercase tracking-wide">Pinned</span>
        <SingleComment comment={pinnedComment} />
      </div>
    )}

    <CommentsFeed />
  </div>
);
```

***

## Add "Load More" Button Instead of Infinite Scroll

In `comments-feed.tsx`, replace the infinite scroll observer with an explicit button:

```tsx theme={null}
{hasNextPage && (
  <button
    onClick={() => fetchNextPage()}
    disabled={isFetchingNextPage}
    className="w-full py-2 text-blue-600 hover:underline text-sm"
  >
    {isFetchingNextPage ? 'Loading...' : 'Load more comments'}
  </button>
)}
```

***

## Integrate with Error Tracking

```tsx theme={null}
// File: use-threaded-comments.tsx

const submitComment = async (text: string) => {
  try {
    await createComment({ content: text });
  } catch (error) {
    Sentry.captureException(error, {
      tags: { feature: 'comments', entityId: entity.id }
    });
    throw error;
  }
};
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Advanced" icon="star" href="/v7/components/customization/advanced">
    Advanced customization techniques
  </Card>

  <Card title="Colors & Theming" icon="palette" href="/v7/components/customization/colors-theming">
    Customize colors and dark mode
  </Card>

  <Card title="Layout & Structure" icon="table-columns" href="/v7/components/customization/layout-structure">
    Modify layout
  </Card>

  <Card title="File Structure" icon="folder-tree" href="/v7/components/components/threaded/file-structure">
    Threaded comments file organization
  </Card>
</CardGroup>