Add a comment section to your React project - Bonus: Inline-Styling

In my previous two articles, I've introduced my new library Replyke, which helps you integrate a fully functioning comment section in your React app - in less than 5 minutes.

In part 1, I've showed you how to implement Replyke in your app in the most basic way, using Replyke's servers to host our data.

In part 2, I've showed you how to add an API backend to work with Replyke, so you could store all of your data on your own database, rather than on Replyke's DB.

With these two tutorials, you unlock all the power of Replyke as a plug and play comment section for your react app.

In this shorter tutorial I will show you how you can further customize Replyke's UI in your code, rather then in Replyke's design studio.

Why would you like to do it? Maybe you like a certain style, but want to make a tiny change somewhere it is implemented, instead of having to recreate an entire style again in the studio, which would be 99% identical to a style you already have.
Or maybe you want to quickly make some changes to check before heading to the studio and saving them to your style document.

For whatever reason you might want to do this, I will now show you how.

Add inline-styling to your CommentSection

Our CommentSetion component has 4 more optional props we can use to further customize our comment section's UI. Each of the values we can define here exist in the design studio and vice versa. Any value we define using these props though, would overwrite the values we had defined for our style in the studio (the actual style document wouldn't be impacted).

# Note: all props and their children are optional.

The four props and their values are as follows.

SectionProps
The values passed to this prop affect some general configuration, like how many comments or replies we want to fetch in every call, and also some general UI settings which affect the comment section as a whole.

Here is the complete object with all the values we can pass to sectionProps, with explanations on what they control:

  // 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
The values passed to this prop affect the container and its children of the form to write a new comment (new comment only, not a reply).

Here is the complete object with all the values we can pass to formProps (I will explain the values of the ones I think might not be self explanatory):

  // 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
The values passed to this prop affect the container and its children of the bar under the form, presenting the statistics of the article (likes, comments) and the current user's profile.

Here is the complete object with all the values we can pass to statsBarProps, with explanations on what they control:

  // 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
The values passed to this prop affect the container and its children of the comment item.

This prop is divided into 7 sub items: containerProps, headerProps, menuProps, actionBarProps, replyBoxProps, editProps, removeProps.

I will go over each separately, explaining its purpose and the values each holds.

CommentElementsProps - containerProps
The values passed to this prop affect general UI settings of the comment.

Here is the complete object with all the values we can pass to containerProps, with explanations on what they control:

  // 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
The values passed to this prop affect the top-part of the comment element, containing the author avatar & and date the comment was posted.

Here is the complete object with all the values we can pass to headerProps, with explanations on what they control:

  // 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 values passed to this prop affect the UI of the comment's menu button and menu options (Edit & Delete).

Here is the complete object with all the values we can pass to menuProps, with explanations on what they control:

  // 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 values passed to this prop affect the bottom-part of the comment element, containing the like button and comment statistics, and also the "Reply" CTA.

Here is the complete object with all the values we can pass to actionBarProps, with explanations on what they control:

  // 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
The values passed to this prop affect the form that is opened when a user wants to reply to a comment.

Here is the complete object with all the values we can pass to replyBoxProps, with explanations on what they control:

  // 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 values passed to this prop affect the form that is opened when a user wants to edit one of their comments/replies.

Here is the complete object with all the values we can pass to editProps, with explanations on what they control:

  // 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 values passed to this prop affect the box that opens when a user wants to delete their comment/reply.

Here is the complete object with all the values we can pass to removeProps, with explanations on what they control:

  // 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

And that is it! With these properties you can further customize your comment section without having to head to Replyke's studio.

Using inline styling, your comment section component would look like this:

<CommentSection
 appKey="YOUR_APP_KEY"
 articleId="UNIQUE_ARTICLE_ID"
 styleId="STYLE_ID"
 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 with this, you now have all the information needed to add Replyke to your app, style it in the studio, host your own data and further customize the UI in your code.

I hope this helps you complete your projects! If you find this project helpful, I'd be happy to hear about it and get any feedback I can.

Thank you for reading!

Blog

Add a comment section to your React project - Bonus: Inline-Styling

Tsabary

Add inline-styling to your CommentSection

Closing note

Join Our Newsletter. No Spam, Only the good stuff.

Related