Skip to main content

Social Style Integration

Components​

The social section is constructed using two required components and two optional components. All must be wrapped under a single instance of a ReplykeSocialProvider. You may use ReplykeSocialProvider more than once in your site, and even more than once in a single page. Each instance holds data for a specific article, and the components in it operate within the context of that article.

Reauired components​

CommentsFeed​

This is the container holding all the comments of the article. The height of this component is the required height of all the currently loaded comments, and it is up to you to wrap it in a parent which implements scrolling if you wish.

When there are no comments on an article, Replyke displays "No comments yet - start the conversation" by default. To use a custom message or element (like an animation), wrap your desired element with CommentsFeed and pass it as a child. This custom element will replace the default message if no comments are available.

NewCommentForm​

The input bar where users can type and send a new comment or reply.

Optional components​

SocialActionsBar​

A bar with icons and statistics for the article. It presents:

  1. Heart icon - intractive button which allows users to like/unlike the article.
  2. Comment icon - Focuses the input field when clicked.
  3. Share icon - only renders if a shareClickCallback was passed to the context provider. When clicked, it will execute shareClickCallback.
  4. Bookmark icon - similarly to the share icon, it only renders if bookmarkClickCallback was passed to the context provider, and when clicked, it will execute bookmarkClickCallback.

SortByButton​

This button can change the order by which comments and replies are sorted. It expacts three parameters:

  1. priority (newest/oldest/popular) - this button can be used more then once in your UI, where each instance represents a different functionality (for example, one is used to sort by popular first when clicked, where a second instance is used to sort by newest first).
  2. activeView - the UI element for when this sorting preference is currently active. For example, how the "Sort by popular" button will look like when the comments are already being sorted by popular.
  3. nonActiveView - the UI element for when this sorting is NOT currently active.

Callbacks​

1. commentAuthorClickCallback​

Purpose: Executes when a user clicks on a comment author's name or avatar.

Use Case: Useful for navigating to the author's profile page or initiating a chat.

Example:

commentAuthorClickCallback={(authorId) => { /* navigate to author's profile */ }}

2. currentUserClickCallback​

Purpose: Activated when a user clicks their own name or avatar in a comment.

Use Case: Ideal for directing to the user's own profile or settings.

Example:

currentUserClickCallback={() => { /* navigate to user's profile */ }}

3. shareClickCallback​

Purpose: Executes when a user clicks the share button on a comment.

Use Case: Useful for opening a share dialog, copying the comment link, or integrating with social media sharing features. If not configured, the share button will not be displayed.

Example:

shareClickCallback={(authorId) => { /* open share dialog or copy link */ }}

4. bookmarkClickCallback​

Purpose: Activated when a user clicks the bookmark button on a post/page.

Use Case: Ideal for adding the item to a user's list of bookmarked or favorite items for easy access later. If not configured, the bookmark button will not be displayed.

Example:

bookmarkClickCallback={() => { /* add item to bookmarks */ }}

5. usernameRequiredCallback​

Purpose: Activated when a user tries to comment, reply or like a comment, but no value was passed for the "name" property in the "currentUser" object.

Use Case: Used to notify users that they need to add their name to their profile before intracting with the comments. If you wish to allow users without a configured name to comment and like, pass a default name in the currentUser object when the user’s name is not set up. As long as Replyke receives any valid string in the currentUser object, the user will be allowed to interact with the comment section. By default, if a callback is not configured, an alert will be shown, prompting the user to set up their name. Example:

usernameRequiredCallback={() => { /* navigate to edit profile / open edit modal */ }}

6. loginRequiredCallback​

Purpose: Activated when a user tries to comment, reply or like a comment, but no they are not authenticated.

Use Case: Used to prompt users to log in or create an account in order to interact with the comment section.

Example:

loginRequiredCallback={() => { /* open a modal with an authentication flow */ }}

7. commentTooShortCallback​

Purpose: Activated when a user tries to comment an empty comment.

Use Case: Used to notify users that their comment needs more content.

Example:

commentTooShortCallback={() => { /* show a toast notifying them about invalid content */ }}

8. replyTooShortCallback​

Purpose: Activated when a user tries to reply an empty reply.

Use Case: Used to notify users that their reply needs more content.

Example:

replyTooShortCallback={() => { /* show a toast notifying them about invalid content */ }}

These callbacks provide a seamless integration with your existing user management system, enhancing the overall user experience in your application.

Managing Guests​

  • When user is undefined (no user logged in), Replyke displays a login message when the user tries to perform an action as liking or adding a comment.
  • This feature caters to situations where users are not logged in, inviting them to authenticate to interact with the comment system.

This design allows Replyke to offer a consistent and integrated commenting experience, whether users are logged in or browsing as guests.