Comment Tray Component

This component provide viewing comment, creating and editing, adding reaction.

The Comment Tray Component in Social Plus UIKit 4.0 facilitates a dynamic interaction layer for users to engage with stories or posts through comments and reactions. This customizable component is designed to foster community engagement and conversation directly within the content viewing experience.

Features

View, create or edit comments

User can view, create or edit text comments or reply comments, can also add reaction to comment.

Customization

Config ID

Type

Description

*/edit_comment_component/*

Component

You can customize theme

*/edit_comment_component/cancel_button

Element

You can customize button_text, icon and background_color

*/edit_comment_component/save_button

Element

You can customize button_text, icon and background_color

*/comment_tray_component/*

Component

You can customize close_icon

For more details on customization, please refer to the Customization page.

Usage

For iOS applications, integrating the Comment Tray Component involves initializing it with a reference ID (such as a story or post ID) and specifying the reference type. Here's a simple example:

This snippet sets up the comment tray for a specific story, ready to be incorporated into the app’s UI through a SwiftUI hosting controller.

import React from 'react';
import { AmityStoryTabComponent } from '@amityco/ui-kit';

const CommunityStoriesTab = ({ communityId }) => {
  return (
    <AmityStoryTabComponent type={{ communityFeed: communityId }} />
  );
};

export default CommunityStoriesTab;

In this example, we define a functional component called CommunityStoriesTab that takes a communityId prop. Inside the component, we render the AmityStoryTabComponent and pass the communityId as the value for the communityFeed property within the type prop.

Last updated 3 months ago

Was this helpful?