Effortlessly Integrate Engaging Comment Sections in React with Replyke: Part 3

Welcome to Part 3 of our series. In Part 1, we explored how to implement Replyke in your React app, and in Part 2, we navigated through creating the right routes for effective API communication. Now, in this final installment, we delve into the art of styling your comment section. Let's unlock the full potential of Replyke with two styling approaches.

The Easy Way: Replyke's Design Studio

Creating Your Style:

• Visit replyke.com and create an account.

• Head to the Studio where a user-friendly interface awaits.
  Customize your UI with complete control over colors, sizes, text, padding, margins, borders, and more.

Publishing and Implementing:

• After customization, name your style and click "publish".

• Copy the style ID displayed at the top of your screen.

• In your React app, pass this style ID to your CommentSection component using the styleId parameter.

Note on RTL Support: For RTL layout support, simply set dir="rtl" on your CommentSection component.

The Second Way: Inline Styling

Sometimes, you may need more nuanced control or wish to make minor tweaks directly in the code. Here's how you can apply inline styling to the CommentSection component.

Using Inline Styling Props
Our CommentSection component offers four optional props for deeper UI customization. Any values defined here will override the studio's style settings (without altering the actual style document):

• SectionProps: Affects general configurations and UI settings for the entire comment section.

• FormProps: Tailors the container and elements of the new comment form.

• StatsBarProps: Modifies the statistics bar layout and elements.

• CommentElementsProps: Divided into seven categories, this prop allows detailed customization of each comment element, including the container, header, menu, action bar, reply box, edit form, and delete confirmation.

For each prop, we'll go through the complete object of values, explaining their controls and impacts:

SectionProps

  // How many comments we want to fetch in very call
  commentChunkSize?: number;

  // How many replies we want to fetch in very call
  replyChunkSize?: number;

  // The text used to prompt users to load more comments
  loadMoreText?: string;

  // The color of the text used to prompt users to load more comments
  loadMoreColor?: string;

  // An array of HEX colors to be used to generate
  // random avatars for users who have no profile picture
  avatarPlaceholderColors?: string[];

formProps

  // When an unauthenticated user tries to post a comment we will show them this message
  loginFirstMessage?: string;

  // When a user tries to post a comment that is too short we will show them this message
  commentTooShortMessage?: string;

  // Background color for the entire form container
  backgroundColor?: string;

  // Border radius for the entire form component
  borderRadius?: number;

  // Border color of the entire form component
  borderColor?: string;

  // Border style fo the entire form component
  borderStyle?: BorderStyles;

  // Border width of the entire form component
  borderWidth?: number;

  // Left padding of the entire form component
  paddingLeft?: number;

  // Right padding of the entire form component
  paddingRight?: number;

  // Top padding of the entire form component
  paddingTop?: number;

  // Bottom padding of the entire form component
  paddingBottom?: number;

  // Determines if the entire form component has a shadow or not
  shadow?: boolean;

  // The placeholder text used in the textarea component
  textareaPlaceholder?: string;

  // The color of the text typed in the textarea component
  textareaTextColor?: string;

  // The font size of the text typed in the textarea component
  textareaTextSize?: number;

  // Determines the height of the textarea
  textareaDefaultRows?: number;

  // The top margin of the post comment button
  buttonMarginTop?: number;

  // The border radius of the post comment button
  buttonBorderRadius?: number;

  // The font size of the post comment button
  buttonFontSize?: number;

  // The font weight of the post comment button
  buttonFontWeight?: number;

  // The color of text in the post comment button
  buttonFontColor?: string;

  // The horizontal padding of the post comment button
  buttonPaddingX?: number;

  // The vertical padding of the post comment button
  buttonPaddingY?: number;

  // The color of the post comment button
  buttonColor?: string;

  // The text used for the post comment button
  buttonText?: string;

  // Determines if the post comment button takes the full width of the container or not
  buttonFullWidth?: boolean;

  // Determines if the post comment button has a shadow or not
  buttonShadow?: boolean;

statsBarProps

  // When an unauthenticated user tries to like an article we will show them this message
  loginFirstMessage?: string;

  // The text used for the option to sort by newest comments come first
  newestFirstText?: string;

  // The text used for the option to sort by oldest comments come first
  oldestFirstText?: string;

  // The text used for the option to sort by popular comments come first
  popularText?: string;

  // The color of the sort by text
  sortByButtonTextColor?: string;

  // The font size of the text showing our current sort by setting
  sortByButtonFontSize?: number;

  // The color of the text of the sort by options
  sortByItemsTextColor?: string;

  // The font size of the text of the sort by options
  sortByItemsFontSize?: number;

  // The size of the chevron icon in the sort by dropdown
  sortByChevronSize?: number;

  // The text used for the button unauthenticated users see
  loginText?: string;

  // The font size of the login button unauthenticated users see
  loginFontSize?: number;

  // The font color of the login button unauthenticated users see
  loginFontColor?: string;

  // The horizontal padding for the entire bar
  paddingX?: number;

  // The vertical padding for the entire bar
  paddingY?: number;

  // The size of the icons in the stats bar
  iconsSize?: number;

  // The bottom margin for the entire stats bar
  marginBottom?: number;

  // The color of the like icon when it hasn't been clicked
  likeIconColor?: string;

  // The color of the like icon after it has been clicked
  likeActiveIconColor?: string;

  // The font size of the text showing how many likes the article has
  likeCountFontSize?: number;

  // The color of the comments icon
  commentIconColor?: string;

  // The font size of the text showing how many comments the article has
  commentCountFontSize?: number;

  // The width of the bottom border of the stats bar
  borderBottomWidth?: number;

  // The color of the bottom border of the stats bar
  borderBottomColor?: string;

  // The style of the bottom border of the stats bar
  borderBottomStyle?: BorderStyles;

  // The avatar size of logged in users
  avatarSize?: number;

  // The avatar's border radius
  avatarBorderRadius?: number;

  // The font size of the username
  usernameFontSize?: number;

  // The font weight of the username
  usernameFontWeight?: number;

  // The font color of the username
  usernameFontColor?: string;

  // How wide is the gap between the likes info and the comments info
  itemsGap?: number;

CommentElementsProps - containerProps

  // How far in do replies get pushed in relation to their parent element
  replyIndent?: number;

  // The top margin of the comment body, affecng the space between the text and the comment header (containing the user details, date  menu)
  headerBodySpacing?: number;

  // Width of the border separating top-level comments
  threadsSeperatorWidth?: number;

  // Color of the border separating top-level comments
  threadsSeperatorColor?: string;

  // Style of the border separating top-level comments
  threadsSeperatorStyle?: BorderStyles;

  // The padding between the top border and the rest of the comment
  threadsSeperatorTopPadding?: number;

  // Bottom margin for each comment
  marginBottom?: number;

  // Horizontal padding for the entire comment element
  paddingX?: number;

  // Vertical padding for the entire comment element
  paddingY?: number;

  // Font size of the comment body
  commentFontSize?: number;

  // Color of the comment body
  commentFontColor?: string;

  // The text used to prompt users to load more replies
  loadMoreText?: string;

  // The color of the text used to prompt users to load more replies
  loadMoreColor?: string;

  // The width of the vertical line on the side of replies
  repliesSideBorderWidth?: number;

  // The border style of the vertical line on the side of replies
  repliesSideBorderStyle?: BorderStyles;

  // The color of the vertical line on the side of replies
  repliesSideBorderColor?: string;

  // The message presented to unauthenticated users when they try to like an article
  loginToLikeMessage?: string;

CommentElementsProps - headerProps

  // Color of the text for the author name
  authorNameColor?: string;

  // Font size of the text for the author name
  authorNameFontSize?: number;

  // Size in pixels for he author's avatar
  authorAvatarSize?: number;

  // Border radius of the author's avatar
  authorAvatarBorderRadius?: number;

  // Font size of the text for the date the comment was posted
  dateFontSize?: number;

  // Color of the text for the date the comment was posted
  dateFontColor?: string;

CommentElementsProps - menuProps

  // The padding in the container of the three dots icon
  buttonPadding?: number;

  // The background color of the container of the three dots icon
  buttonBackgroundColor?: string;

  // The border radius of the container of the three dots icon
  buttonBorderRadius?: number;

  // The color of the three dots icon
  buttonIconColor?: string;

  // The width of the menu container when opened
  containerWidth?: number;

  // The background color of the menu container when opened
  containerBackgroundColor?: string;

  // Controls if the opened menu container has a shadow
  containerShadow?: boolean;

  // The border radius of the opened menu container
  containerBorderRadius?: number;

  // The color of the divider between menu items
  containerDividerColor?: TailwindColors;

  // The horizonal padding inside the menu items container
  containerPaddingX?: number;

  // The vertical padding inside the menu items container
  containerPaddingY?: number;

  // The font size of the menu items
  itemsFontSize?: number;

  // The text color of the menu items
  itemsTextColor?: string;

  // The horizonal padding for the menu items
  itemsPaddingX?: number;

  // The vertical padding inside the menu items container
  itemsPaddingY?: number;

  // The text used for the "edit" option on the menu
  editText?: string;

  // The text used for the "remove" option on the menu
  removeText?: string;

CommentElementsProps - actionBarProps

  // The color of the like icon if it hasn't been clicked
  likeIconColor?: string;

  // The color of the like icon when it has been clicked
  likeActiveIconColor?: string;

  // The color of the comment icon
  commentIconColor?: string;

  // The text by the comment icon
  repliesText?: string;

  // The text by the comment icon for when replies are visible
  hideRepliesText?: string;

  // The text used for the button calling users to reply
  replyCtaText?: string;

  // The color of the text used for the button calling users to reply
  replyCtaColor?: string;

  // The font size of the text used for the button calling users to reply
  replyCtaFontSize?: number;

  // When an unauthenticated user tries to like a comment we will show them this message
  loginFirstMessage?: string;

CommentElementsProps - replyBoxProps

  // When an unauthenticated user tries to post a reply we will show them this message
  loginFirstMessage?: string;

  // When a user tries to post a reply that is too short we will show them this message
  replyTooShortMessage?: string;

  // The background color of the entrie container
  backgroundColor?: string;

  // The top margin of the entire container
  marginTop?: number;

  // The border radius of the entire container
  borderRadius?: number;

  // The container's border color
  borderColor?: string;

  // The container's border style
  borderStyle?: BorderStyles;

  // The container's border width
  borderWidth?: number;

  // The container's left padding
  paddingLeft?: number;

  // The container's right padding
  paddingRight?: number;

  // The container's top padding
  paddingTop?: number;

  // The container's bottom padding
  paddingBottom?: number;

  // Controls whether the container has a shadow or not
  shadow?: boolean;

  // The textarea's placeholder text
  textareaPlaceholder?: string;

  // The color of the textarea input text
  textareaTextColor?: string;

  // The font size of the textarea input text
  textareaTextSize?: number;

  // Controls the default height of the textarea
  textareaDefaultRows?: number;

  // The text used for the cancel button
  cancelButtonText?: string;

  // The font size of the "Cancel" button text
  cancelButtonFontSize?: number;

  // The font weight of the "Cancel" button text
  cancelButtonFontWeight?: number;

  // The font color of the "Cancel" button text
  cancelButtonFontColor?: string;

  // The text used for the reply button
  replyButtonText?: string;

  // The  color of the "Reply" button
  replyButtonColor?: string;

  // The border radius of the "Reply" button
  replyButtonBorderRadius?: number;

  // The font size of the "Reply" button text
  replyButtonFontSize?: number;

  // The font weight of the "Reply" button text
  replyButtonFontWeight?: number;

  // The color of the "Reply" button text
  replyButtonFontColor?: string;

  // The horizontal padding of the "Reply" button
  replyButtonPaddingX?: number;

  // The vertical padding of the "Reply" button
  replyButtonPaddingY?: number;

  // Controls if "Reply" button has a shadow or not
  replyButtonShadow?: boolean;

CommentElementsProps - editProps

  // The top margin for the entire edit container
  marginTop?: number;

  // The background color for the entire edit container
  backgroundColor?: string;

  // The border radius for the entire edit container
  borderRadius?: number;

  // The color of the container's border
  borderColor?: string;

  // The style of the container's border 
  borderStyle?: BorderStyles;

  // The width of the container's border
  borderWidth?: number;

  // The container's left padding
  paddingLeft?: number;

  // The container's right padding
  paddingRight?: number;

  // The container's top padding
  paddingTop?: number;

  // The container's bottom padding
  paddingBottom?: number;

  // Controls if the container has a shadow or not
  shadow?: boolean;

  // The placeholder text if the user deleted the entire content of their comment
  textareaPlaceholder?: string;

  // The color of the textarea input text
  textareaTextColor?: string;

  // The font size of the textarea input text
  textareaTextSize?: number;

  // Controls the default height of the container
  textareaDefaultRows?: number;

  // The text used for the cancel button
  cancelButtonText?: string;

  // The font color of the "Cancel" button text
  cancelButtonFontColor?: string;

  // The font size of the "Cancel" button text
  cancelButtonFontSize?: number;

  // The text used for the save button
  saveButtonText?: string;

  // The color of the "Save" button
  saveButtonColor?: string;

  // The border radius of the "Save" button
  saveButtonBorderRadius?: number;

  // The font size of the "Save" button text
  saveButtonFontSize?: number;

  // The font weight of the "Save" button text
  saveButtonFontWeight?: number;

  // The font color of the "Save" button text
  saveButtonFontColor?: string;

  // The horizontal padding of the "Save" button
  saveButtonPaddingX?: number;

  // The vertical padding of the "Save" button
  saveButtonPaddingY?: number;

  // Controls if the "Save" button has a shadow or not
  saveButtonShadow?: boolean;

CommentElementsProps - removeProps

  // The text displayed to user asking them if they are sure about deleting their comment
  promptText?: string;

  // The color of the prompt text
  promptTextColor?: string;

  // The font size of the prompt text
  promptTextFontSize?: number;

  // The text for the cancel button
  cancelButtonText?: string;

  // The font size of the "Cancel" button text
  cancelButtonFontSize?: number;

  // The font weight of the "Cancel" button text
  cancelButtonFontWeight?: number;

  // The font color of the "Cancel" button text
  cancelButtonFontColor?: string;

  // The text for the confirm button
  confirmButtonText?: string;

  // The color of the confirm button
  confirmButtonColor?: string;

  // The border radius of the confirm button
  confirmButtonBorderRadius?: number;

  // The font siz of the "Confirm" button text
  confirmButtonFontSize?: number;

  // The font weight of the "Confirm" button text
  confirmButtonFontWeight?: number;

  // The font color of the "Confirm" button text
  confirmButtonFontColor?: string;

  // The horizontal padding of the "Confirm" button
  confirmButtonPaddingX?: number;

  // The vertical padding of the "Confirm" button
  confirmButtonPaddingY?: number;

  // Controls if the "Confirm" button has a shadow or not
  confirmButtonShadow?: boolean;

Closing Note

With these styling options at your disposal, you can create a comment section that not only fits perfectly with your app's functionality but also aligns seamlessly with its aesthetic. Your final CommentSection component, enhanced with inline styling, might look like this:

<CommentSection
 articleId="UNIQUE_ARTICLE_ID"
 styleId="STYLE_ID" // Optional
 callbacks={{
    loginClickCallback: LOGIN_CALLBACK,
    commentAuthorClickCallback: COMMENT_AUTHOR_CLICK_CALLBACK,
    currentUserClickCallback: CURRENT_USER_CLICK_CALLBACK
 }}
 currentUser={user ? {
    _id: USER_ID,
    name: USER_NAME,
    img: USER_IMAGE
 } : undefined}
 sectionProps={...sectionProps}
 formProps={...formProps}
 statsBarProps={...statsBarProps}
 commentElementsProps={{
    containerProps : {...containerProps},
    headerProps : {...headerProps},
    menuProps : {...menuProps},
    actionBarProps : {...actionBarProps},
    replyBoxProps : {...replyBoxProps},
    editProps : {...editProps},
    removeProps : {...removeProps}
 }}
 /> 

And there you have it! You're now equipped to add Replyke to your app, customize its appearance, host your data, and fine-tune the UI directly in your code.

I hope this guide aids you in completing your projects. Should you find Replyke beneficial, I'd love to hear about your experience and receive any feedback you might have.