Docs | Replyke

Callbacks for the Threaded Comment Section

Replyke provides a robust callback system to give developers control over user interactions in the threaded comment section. These callbacks allow you to define specific behaviors for various scenarios, enhancing the user experience and ensuring consistency with your app’s requirements.

The threaded comment style uses the same core interaction callbacks as social comments, with the voting system (upvotes/downvotes) handled automatically by the component.

Below is the interface for available callbacks:

export type ThreadedStyleCallbacks = {
  loginRequiredCallback?: () => void;
  // Executed when an unauthenticated user tries to interact with the comments
  // (vote/comment/reply). Defaults to a simple alert message.
 
  usernameRequiredCallback?: () => void;
  // Executed when a user with no username tries to interact with the comments
  // (vote/comment/reply). Useful for enforcing usernames (e.g., directing users to
  // set up a username). If not provided, the action will be submitted, and a
  // generic username (e.g., user-85h344) will be used in the UI.
 
  commentTooShortCallback?: () => void;
  // Executed if the user attempts to submit an empty or too-short comment/reply.
  // Defaults to a simple alert message.
 
  currentUserClickCallback?: () => void;
  // Defines what happens when a user clicks their own avatar, name, or mention in the
  // comment section (e.g., redirecting them to their profile). Defaults to no action.
 
  otherUserClickCallback?: (userId: string) => void;
  // Defines what happens when a user clicks another user's avatar, name, or mention
  // in the comment section (e.g., navigating to that user's profile). Defaults to no action.
 
  userCantBeMentionedCallback?: () => void;
  // What should happen when a user tries to mention another user but that other user
  // has no username set, which is a prerequisite to being mentioned. Defaults to basic alert message.
};

Callback Descriptions

loginRequiredCallback
- Purpose: Handles scenarios where an unauthenticated user attempts to interact with the comment section.
- Default Behavior: Shows a simple alert message.
- Suggested Use: Direct the user to a login or signup page to enable interaction.
- Threaded Context: Triggered for voting (upvote/downvote), commenting, or replying.
usernameRequiredCallback
- Purpose: Enforces username setup for users without a defined username.
- Default Behavior: The interaction proceeds, and a generic username (e.g., user-85h344) is displayed.
- Suggested Use: Prompt the user to set up a username, ideally during signup or through a dedicated flow.
- Threaded Context: Essential for discussions where user identity matters for reputation and thread following.
commentTooShortCallback
- Purpose: Prevents submission of empty or too-short comments/replies.
- Default Behavior: Alerts the user with a simple message.
- Suggested Use: Display a friendly message explaining why the comment cannot be submitted.
- Threaded Context: Particularly important for maintaining discussion quality in forum-style environments.
currentUserClickCallback
- Purpose: Handles clicks on the current user’s avatar, name or mention in the comment section.
- Default Behavior: No action.
- Suggested Use: Redirect the user to their profile or account settings page.
- Threaded Context: Useful for users to access their profile or view their discussion history.
otherUserClickCallback
- Purpose: Handles clicks on other users’ avatars, names, or mentions.
- Default Behavior: No action.
- Suggested Use: Navigate to the clicked user’s profile or show a modal with their information.
- Threaded Context: Critical for building community connections in discussion forums.
userCantBeMentionedCallback
- Purpose: Handles cases where a user tries to mention another user who does not have a username set.
- Default Behavior: Shows a basic alert message.
- Suggested Use: You can notify the current user that mentioning of that user is not available. To avoid that, require all new users to set a unique username.
- Threaded Context: Ensures smooth mention functionality in complex discussion threads.

Vote System Handling

Unlike social comments, threaded comments include an upvote/downvote system. Vote interactions are handled automatically by the threaded comment system and don’t require additional callbacks. The voting system:

Automatically handles authentication checks
Prevents duplicate voting
Updates scores in real-time
Triggers the loginRequiredCallback for unauthenticated users
Uses the same username validation as other interactions

Example Usage

Here’s an example of how you can define and pass these callbacks to the threaded comment section:

import React from "react";
import { useThreadedComments, useThreadedStyle } from "@replyke/comments-threaded-react-js";
 
const ThreadedCommentSectionWithCallbacks = ({ entityId }: { entityId: string }) => {
  const styleConfig = useThreadedStyle();
 
  const callbacks = {
    loginRequiredCallback: () => {
      // Show login modal or redirect to login page
      showLoginModal();
    },
    usernameRequiredCallback: () => {
      // Prompt user to set username
      showUsernameSetupModal();
    },
    commentTooShortCallback: () => {
      // Show friendly validation message
      showNotification({
        message: "Comment Too Short",
        description: "Please add more content to your comment.",
        type: "warning",
      });
    },
    currentUserClickCallback: () => {
      // Navigate to user's own profile
      navigateToProfile();
    },
    otherUserClickCallback: (userId) => {
      // Navigate to another user's profile
      navigateToUserProfile(userId);
    },
    userCantBeMentionedCallback: () => {
      showNotification({
        message: "User Can't Be Mentioned",
        description: "This user cannot be mentioned because they don't have a username set.",
        type: "warning",
      });
    },
  };
 
  const { CommentSectionProvider, CommentsFeed, NewCommentForm } = useThreadedComments({
    entityId,
    styleConfig,
    callbacks,
  });
 
  return (
    <CommentSectionProvider>
      <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
        <div style={{ flex: 1, overflowY: "auto" }}>
          <CommentsFeed />
        </div>
        <div style={{ borderTop: "1px solid #e5e7eb" }}>
          <NewCommentForm />
        </div>
      </div>
    </CommentSectionProvider>
  );
};
 
export default ThreadedCommentSectionWithCallbacks;

Best Practices for Threaded Discussions

Encourage Username Setup: Since threaded discussions often span longer periods, having identifiable usernames improves community building.
Quality Control: Use the commentTooShortCallback to encourage thoughtful contributions rather than short, low-value responses.
Seamless Authentication: Design your login flow to be as frictionless as possible, as voting is a frequent action in threaded discussions.

Conclusion

These callbacks give you granular control over the behavior of your threaded comment section. The automatic handling of the vote system means you can focus on user onboarding, profile navigation, and content quality while the component manages the complex voting interactions. By customizing these callbacks, you can create a cohesive discussion environment that aligns with your application’s community goals.

Styling Component