UPDATES

Add a remark part to your React venture – Bonus: Inline-Styling


In my earlier two articles, I’ve launched my new library Replyke, which helps you combine a completely functioning remark part in your React app – in lower than 5 minutes.

Partially 1, I’ve confirmed you the right way to implement Replyke in your app in probably the most primary approach, utilizing Replyke’s servers to host our information.

Partially 2, I’ve confirmed you the right way to add an API backend to work with Replyke, so you might retailer your entire information by yourself database, slightly than on Replyke’s DB.

With these two tutorials, you unlock all the ability of Replyke as a plug and play remark part on your react app.

On this shorter tutorial I’ll present you how one can additional customise Replyke’s UI in your code, slightly then in Replyke’s design studio.

Why would you love to do it? Perhaps you want a sure model, however wish to make a tiny change someplace it’s applied, as an alternative of getting to recreate a whole model once more within the studio, which might be 99% similar to a mode you have already got.
Or possibly you wish to rapidly make some adjustments to test earlier than heading to the studio and saving them to your model doc.

For no matter purpose you would possibly wish to do that, I’ll now present you the way.



Add inline-styling to your CommentSection

Our CommentSetion part has 4 extra elective props we will use to additional customise our remark part’s UI. Every of the values we will outline right here exist within the design studio and vice versa. Any worth we outline utilizing these props although, would overwrite the values we had outlined for our model within the studio (the precise model doc would not be impacted).

# Word: all props and their kids are elective.

The 4 props and their values are as follows.

SectionProps
The values handed to this prop have an effect on some basic configuration, like what number of feedback or replies we wish to fetch in each name, and in addition some basic UI settings which have an effect on the remark part as an entire.

Right here is the entire object with all of the values we will go to sectionProps, with explanations on what they management:

  // What number of feedback we wish to fetch in very name
  commentChunkSize?: quantity;

  // What number of replies we wish to fetch in very name
  replyChunkSize?: quantity;

  // The textual content used to immediate customers to load extra feedback
  loadMoreText?: string;

  // The colour of the textual content used to immediate customers to load extra feedback
  loadMoreColor?: string;

  // An array of HEX colours for use to generate
  // random avatars for customers who don't have any profile image
  avatarPlaceholderColors?: string[];
Enter fullscreen mode

Exit fullscreen mode

formProps
The values handed to this prop have an effect on the container and its kids of the shape to write down a brand new remark (new remark solely, not a reply).

Right here is the entire object with all of the values we will go to formProps (I’ll clarify the values of those I believe may not be self explanatory):

  // When an unauthenticated person tries to put up a remark we are going to present them this message
  loginFirstMessage?: string;

  // When a person tries to put up a remark that's too brief we are going to present them this message
  commentTooShortMessage?: string;

  // Background coloration for the complete kind container
  backgroundColor?: string;

  // Border radius for the complete kind part
  borderRadius?: quantity;

  // Border coloration of the complete kind part
  borderColor?: string;

  // Border model fo the complete kind part
  borderStyle?: BorderStyles;

  // Border width of the complete kind part
  borderWidth?: quantity;

  // Left padding of the complete kind part
  paddingLeft?: quantity;

  // Proper padding of the complete kind part
  paddingRight?: quantity;

  // High padding of the complete kind part
  paddingTop?: quantity;

  // Backside padding of the complete kind part
  paddingBottom?: quantity;

  // Determines if the complete kind part has a shadow or not
  shadow?: boolean;

  // The placeholder textual content used within the textarea part
  textareaPlaceholder?: string;

  // The colour of the textual content typed within the textarea part
  textareaTextColor?: string;

  // The font dimension of the textual content typed within the textarea part
  textareaTextSize?: quantity;

  // Determines the peak of the textarea
  textareaDefaultRows?: quantity;

  // The highest margin of the put up remark button
  buttonMarginTop?: quantity;

  // The border radius of the put up remark button
  buttonBorderRadius?: quantity;

  // The font dimension of the put up remark button
  buttonFontSize?: quantity;

  // The font weight of the put up remark button
  buttonFontWeight?: quantity;

  // The colour of textual content within the put up remark button
  buttonFontColor?: string;

  // The horizontal padding of the put up remark button
  buttonPaddingX?: quantity;

  // The vertical padding of the put up remark button
  buttonPaddingY?: quantity;

  // The colour of the put up remark button
  buttonColor?: string;

  // The textual content used for the put up remark button
  buttonText?: string;

  // Determines if the put up remark button takes the complete width of the container or not
  buttonFullWidth?: boolean;

  // Determines if the put up remark button has a shadow or not
  buttonShadow?: boolean;
Enter fullscreen mode

Exit fullscreen mode

statsBarProps
The values handed to this prop have an effect on the container and its kids of the bar below the shape, presenting the statistics of the article (likes, feedback) and the present person’s profile.

Right here is the entire object with all of the values we will go to statsBarProps, with explanations on what they management:

  // When an unauthenticated person tries to love an article we are going to present them this message
  loginFirstMessage?: string;

  // The textual content used for the choice to type by latest feedback come first
  newestFirstText?: string;

  // The textual content used for the choice to type by oldest feedback come first
  oldestFirstText?: string;

  // The textual content used for the choice to type by standard feedback come first
  popularText?: string;

  // The colour of the type by textual content
  sortByButtonTextColor?: string;

  // The font dimension of the textual content displaying our present type by setting
  sortByButtonFontSize?: quantity;

  // The colour of the textual content of the type by choices
  sortByItemsTextColor?: string;

  // The font dimension of the textual content of the type by choices
  sortByItemsFontSize?: quantity;

  // The scale of the chevron icon within the type by dropdown
  sortByChevronSize?: quantity;

  // The textual content used for the button unauthenticated customers see
  loginText?: string;

  // The font dimension of the login button unauthenticated customers see
  loginFontSize?: quantity;

  // The font coloration of the login button unauthenticated customers see
  loginFontColor?: string;

  // The horizontal padding for the complete bar
  paddingX?: quantity;

  // The vertical padding for the complete bar
  paddingY?: quantity;

  // The scale of the icons within the stats bar
  iconsSize?: quantity;

  // The underside margin for the complete stats bar
  marginBottom?: quantity;

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

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

  // The font dimension of the textual content displaying what number of likes the article has
  likeCountFontSize?: quantity;

  // The colour of the feedback icon
  commentIconColor?: string;

  // The font dimension of the textual content displaying what number of feedback the article has
  commentCountFontSize?: quantity;

  // The width of the underside border of the stats bar
  borderBottomWidth?: quantity;

  // The colour of the underside border of the stats bar
  borderBottomColor?: string;

  // The model of the underside border of the stats bar
  borderBottomStyle?: BorderStyles;

  // The avatar dimension of logged in customers
  avatarSize?: quantity;

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

  // The font dimension of the username
  usernameFontSize?: quantity;

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

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

  // How vast is the hole between the likes data and the feedback data
  itemsGap?: quantity;
Enter fullscreen mode

Exit fullscreen mode

commentElementsProps
The values handed to this prop have an effect on the container and its kids of the remark merchandise.

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

I’ll go over every individually, explaining its function and the values every holds.

CommentElementsProps – containerProps
The values handed to this prop have an effect on basic UI settings of the remark.

Right here is the entire object with all of the values we will go to containerProps, with explanations on what they management:

  // How far in do replies get pushed in relation to their father or mother aspect
  replyIndent?: quantity;

  // The highest margin of the remark physique, affecng the area between the textual content and the remark header (containing the person particulars, date  menu)
  headerBodySpacing?: quantity;

  // Width of the border separating top-level feedback
  threadsSeperatorWidth?: quantity;

  // Colour of the border separating top-level feedback
  threadsSeperatorColor?: string;

  // Model of the border separating top-level feedback
  threadsSeperatorStyle?: BorderStyles;

  // The padding between the highest border and the remainder of the remark
  threadsSeperatorTopPadding?: quantity;

  // Backside margin for every remark
  marginBottom?: quantity;

  // Horizontal padding for the complete remark aspect
  paddingX?: quantity;

  // Vertical padding for the complete remark aspect
  paddingY?: quantity;

  // Font dimension of the remark physique
  commentFontSize?: quantity;

  // Colour of the remark physique
  commentFontColor?: string;

  // The textual content used to immediate customers to load extra replies
  loadMoreText?: string;

  // The colour of the textual content used to immediate customers to load extra replies
  loadMoreColor?: string;

  // The width of the vertical line on the aspect of replies
  repliesSideBorderWidth?: quantity;

  // The border model of the vertical line on the aspect of replies
  repliesSideBorderStyle?: BorderStyles;

  // The colour of the vertical line on the aspect of replies
  repliesSideBorderColor?: string;

  // The message introduced to unauthenticated customers after they attempt to like an article
  loginToLikeMessage?: string;
Enter fullscreen mode

Exit fullscreen mode

CommentElementsProps – headerProps
The values handed to this prop have an effect on the top-part of the remark aspect, containing the writer avatar & and date the remark was posted.

Right here is the entire object with all of the values we will go to headerProps, with explanations on what they management:

  // Colour of the textual content for the writer title
  authorNameColor?: string;

  // Font dimension of the textual content for the writer title
  authorNameFontSize?: quantity;

  // Measurement in pixels for he writer's avatar
  authorAvatarSize?: quantity;

  // Border radius of the writer's avatar
  authorAvatarBorderRadius?: quantity;

  // Font dimension of the textual content for the date the remark was posted
  dateFontSize?: quantity;

  // Colour of the textual content for the date the remark was posted
  dateFontColor?: string;
Enter fullscreen mode

Exit fullscreen mode

CommentElementsProps – menuProps
The values handed to this prop have an effect on the UI of the remark’s menu button and menu choices (Edit & Delete).

Right here is the entire object with all of the values we will go to menuProps, with explanations on what they management:

  // The padding within the container of the three dots icon
  buttonPadding?: quantity;

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

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

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

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

  // The background coloration 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?: quantity;

  // The colour of the divider between menu objects
  containerDividerColor?: TailwindColors;

  // The horizonal padding contained in the menu objects container
  containerPaddingX?: quantity;

  // The vertical padding contained in the menu objects container
  containerPaddingY?: quantity;

  // The font dimension of the menu objects
  itemsFontSize?: quantity;

  // The textual content coloration of the menu objects
  itemsTextColor?: string;

  // The horizonal padding for the menu objects
  itemsPaddingX?: quantity;

  // The vertical padding contained in the menu objects container
  itemsPaddingY?: quantity;

  // The textual content used for the "edit" choice on the menu
  editText?: string;

  // The textual content used for the "take away" choice on the menu
  removeText?: string;
Enter fullscreen mode

Exit fullscreen mode

CommentElementsProps – actionBarProps
The values handed to this prop have an effect on the bottom-part of the remark aspect, containing the like button and remark statistics, and in addition the “Reply” CTA.

Right here is the entire object with all of the values we will go to actionBarProps, with explanations on what they management:

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

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

  // The colour of the remark icon
  commentIconColor?: string;

  // The textual content by the remark icon
  repliesText?: string;

  // The textual content by the remark icon for when replies are seen
  hideRepliesText?: string;

  // The textual content used for the button calling customers to answer
  replyCtaText?: string;

  // The colour of the textual content used for the button calling customers to answer
  replyCtaColor?: string;

  // The font dimension of the textual content used for the button calling customers to answer
  replyCtaFontSize?: quantity;

  // When an unauthenticated person tries to love a remark we are going to present them this message
  loginFirstMessage?: string;
Enter fullscreen mode

Exit fullscreen mode

CommentElementsProps – replyBoxProps
The values handed to this prop have an effect on the shape that’s opened when a person desires to answer to a remark.

Right here is the entire object with all of the values we will go to replyBoxProps, with explanations on what they management:

  // When an unauthenticated person tries to put up a reply we are going to present them this message
  loginFirstMessage?: string;

  // When a person tries to put up a reply that's too brief we are going to present them this message
  replyTooShortMessage?: string;

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

  // The highest margin of the complete container
  marginTop?: quantity;

  // The border radius of the complete container
  borderRadius?: quantity;

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

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

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

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

  // The container's proper padding
  paddingRight?: quantity;

  // The container's high padding
  paddingTop?: quantity;

  // The container's backside padding
  paddingBottom?: quantity;

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

  // The textarea's placeholder textual content
  textareaPlaceholder?: string;

  // The colour of the textarea enter textual content
  textareaTextColor?: string;

  // The font dimension of the textarea enter textual content
  textareaTextSize?: quantity;

  // Controls the default peak of the textarea
  textareaDefaultRows?: quantity;

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

  // The font dimension of the "Cancel" button textual content
  cancelButtonFontSize?: quantity;

  // The font weight of the "Cancel" button textual content
  cancelButtonFontWeight?: quantity;

  // The font coloration of the "Cancel" button textual content
  cancelButtonFontColor?: string;

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

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

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

  // The font dimension of the "Reply" button textual content
  replyButtonFontSize?: quantity;

  // The font weight of the "Reply" button textual content
  replyButtonFontWeight?: quantity;

  // The colour of the "Reply" button textual content
  replyButtonFontColor?: string;

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

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

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

Exit fullscreen mode

_CommentElementsProps – editProps
The values handed to this prop have an effect on the shape that’s opened when a person desires to edit one in all their feedback/replies.

Right here is the entire object with all of the values we will go to editProps, with explanations on what they management:

  // The highest margin for the complete edit container
  marginTop?: quantity;

  // The background coloration for the complete edit container
  backgroundColor?: string;

  // The border radius for the complete edit container
  borderRadius?: quantity;

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

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

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

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

  // The container's proper padding
  paddingRight?: quantity;

  // The container's high padding
  paddingTop?: quantity;

  // The container's backside padding
  paddingBottom?: quantity;

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

  // The placeholder textual content if the person deleted the complete content material of their remark
  textareaPlaceholder?: string;

  // The colour of the textarea enter textual content
  textareaTextColor?: string;

  // The font dimension of the textarea enter textual content
  textareaTextSize?: quantity;

  // Controls the default peak of the container
  textareaDefaultRows?: quantity;

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

  // The font coloration of the "Cancel" button textual content
  cancelButtonFontColor?: string;

  // The font dimension of the "Cancel" button textual content
  cancelButtonFontSize?: quantity;

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

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

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

  // The font dimension of the "Save" button textual content
  saveButtonFontSize?: quantity;

  // The font weight of the "Save" button textual content
  saveButtonFontWeight?: quantity;

  // The font coloration of the "Save" button textual content
  saveButtonFontColor?: string;

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

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

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

Exit fullscreen mode

_CommentElementsProps – removeProps
The values handed to this prop have an effect on the field that opens when a person desires to delete their remark/reply.

Right here is the entire object with all of the values we will go to removeProps, with explanations on what they management:

  // The textual content exhibited to person asking them if they're positive about deleting their remark
  promptText?: string;

  // The colour of the immediate textual content
  promptTextColor?: string;

  // The font dimension of the immediate textual content
  promptTextFontSize?: quantity;

  // The textual content for the cancel button
  cancelButtonText?: string;

  // The font dimension of the "Cancel" button textual content
  cancelButtonFontSize?: quantity;

  // The font weight of the "Cancel" button textual content
  cancelButtonFontWeight?: quantity;

  // The font coloration of the "Cancel" button textual content
  cancelButtonFontColor?: string;

  // The textual content for the verify button
  confirmButtonText?: string;

  // The colour of the verify button
  confirmButtonColor?: string;

  // The border radius of the verify button
  confirmButtonBorderRadius?: quantity;

  // The font siz of the "Verify" button textual content
  confirmButtonFontSize?: quantity;

  // The font weight of the "Verify" button textual content
  confirmButtonFontWeight?: quantity;

  // The font coloration of the "Verify" button textual content
  confirmButtonFontColor?: string;

  // The horizontal padding of the "Verify" button
  confirmButtonPaddingX?: quantity;

  // The vertical padding of the "Verify" button
  confirmButtonPaddingY?: quantity;

  // Controls if the "Verify" button has a shadow or not
  confirmButtonShadow?: boolean;
Enter fullscreen mode

Exit fullscreen mode



Closing observe

And that’s it! With these properties you may additional customise your remark part with out having to move to Replyke’s studio.

Utilizing inline styling, your remark part part would appear 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={person ? {
    _id: USER_ID,
    title: 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}
 }}
 /> 
Enter fullscreen mode

Exit fullscreen mode

And with this, you now have all the knowledge wanted so as to add Replyke to your app, model it within the studio, host your personal information and additional customise the UI in your code.

I hope this helps you full your tasks! In the event you discover this venture useful, I might be completely satisfied to listen to about it and get any suggestions I can.

Thanks for studying!

Leave a Reply

Your email address will not be published. Required fields are marked *