Skip to main content
Version: v4

Group Details

Overview​

CometChatDetails is a Component that provides additional information and settings related to a specific group.

The details screen includes the following elements and functionalities:

  1. Group Information: It displays details about the user. This includes his/her profile picture, name, status, and other relevant information.
  2. Group Chat Features: It provides additional functionalities for managing the group. This includes options to add or remove participants, assign roles or permissions, and view group-related information.
  3. Group Actions: This offers actions related to the group, such as leaving the group, or deleting the group.
Image

Usage​

Integration​

The following code snippet illustrates how you can directly incorporate the Details component into your Application.


import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatDetails } from '@cometchat/chat-uikit-react'
import React from 'react'

const GroupDetailsDemo = () => {

    const [chatGroup, setChatGroup] = React.useState<CometChat.Group | undefined>()

    React.useEffect(() => {
        CometChat.getGroup("guid").then((group) => {
            setChatGroup(group);
        })
    }, []);
  return (
    <CometChatDetails
    group={chatGroup}
    />
  )
}

export default GroupDetailsDemo;

Actions​

Actions dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

1. onClose​

The onClose event is typically triggered when the close button is clicked and it carries a default action. However, with the following code snippet, you can effortlessly override this default operation.

This action does not come with any predefined behavior. However, you have the flexibility to override this event and tailor it to suit your needs using the following code snippet.

GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatDetails } from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("guid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  function handleOnClose(): void {
    console.log("Your custom on close actions");
  }
  return (
    <>
      {chatGroup && (
        <CometChatDetails group={chatGroup} onClose={handleOnClose} />
      )}
    </>
  );
};

export default GroupDetailsDemo;
2. onError​

This action doesn't change the behavior of the component but rather listens for any errors that occur in the Group Details component.

GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatDetails } from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("guid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  function handleOnError(error: CometChat.CometChatException): void {
    //Your custom on error actions
  }
  return (
    <>
      {chatGroup && (
        <CometChatDetails group={chatGroup} onError={handleOnError} />
      )}
    </>
  );
};

export default GroupDetailsDemo;

Filters​

Filters allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of ChatSDK.

CometChatDetails component does not have available filters.

Events​

Events are emitted by a Component. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

To handle events supported by Groups you have to add corresponding listeners by using CometChatGroupEvents

The list of Group Related Events emitted by the Details component is as follows:

EventDescription
ccGroupLeftThis event is triggered when the group member leaves the group successfully.
ccGroupDeletedThis event is triggered when the group member deletes the group successfully.
const ccGroupLeft = CometChatGroupEvents.ccGroupLeft.subscribe(
  (item: IGroupLeft) => {
    //Your Code
  }
);

const ccGroupDeleted = CometChatGroupEvents.ccGroupDeleted.subscribe(
  (group: CometChat.Group) => {
    //Your Code
  }
);
ccGroupLeft?.unsubscribe();

ccGroupDeleted?.unsubscribe();

Customization​

To fit your app's design requirements, you can customize the appearance of the Details component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

Style​

Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.

1. Details Style​

You can set the DetailsStyle to the Details Component to customize the styling.

Image
GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatDetails, DetailsStyle } from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("guid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  const detailsStyle = new DetailsStyle({
    background: "#e6dcf7",
    titleTextColor: "#5717cf",
    subtitleTextColor: "#f3edff",
    closeButtonIconTint: "#5717cf",
    passwordGroupIconBackground: "#a73fe8",
    privateGroupIconBackground: "#a73fe8",
  });
  return (
    <>
      {chatGroup && (
        <CometChatDetails group={chatGroup} detailsStyle={detailsStyle} />
      )}
    </>
  );
};

export default GroupDetailsDemo;

List of properties exposed by DetailsStyle

PropertyDescriptionCode
borderUsed to set borderborder?: string,
borderRadiusUsed to set border radiusborderRadius?: string;
backgroundUsed to set background colourbackground?: string;
heightUsed to set heightheight?: string;
widthUsed to set widthwidth?: string;
titleTextFontUsed to customise the font of the title in the app bartitleTextFont?: string;
titleTextColorUsed to customise the color of the title in the app bartitleTextColor?: string;
onlineStatusColorSets the color of the status indicator representing the user's online statusonlineStatusColor?: string;
subtitleTextFontSets all the different properties of font for the subtitle textsubtitleTextFont?: string;
subtitleTextColorSets the color of the subtitle textsubtitleTextColor?: string;
closeButtonIconTintSets the color of the close icon of the componentcloseButtonIconTint?: string;
privateGroupIconBackgroundUsed to set private group icon backgroundprivateGroupIconBackground?: string,
passwordGroupIconBackgroundUsed to set password group icon backgroundpasswordGroupIconBackground?: string;
paddingUsed to set paddingpadding?:string;
2. LeaveDialog Style​

You can set the leaveDialogStyle to the Details Component to customize the styling.

Image
GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatDetails } from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("guid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  const leaveDialogStyle = {
    background: "#7109b3",
    height: "500px",
    width: "500px",
  };
  return (
    <>
      {chatGroup && (
        <CometChatDetails
          group={chatGroup}
          leaveDialogStyle={leaveDialogStyle}
        />
      )}
    </>
  );
};

export default GroupDetailsDemo;
3. DeleteDialog Style​

You can set the deleteDialogStyle to the Details Component to customize the styling.

GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatDetails } from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("guid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  const deleteDialogStyle = {
    background: "#7109b3",
    height: "500px",
    width: "500px",
  };
  return (
    <>
      {chatGroup && (
        <CometChatDetails
          group={chatGroup}
          deleteDialogStyle={deleteDialogStyle}
        />
      )}
    </>
  );
};

export default GroupDetailsDemo;
4. Avatar Style​

To apply customized styles to the Avatar component in the Details Component, you can use the following code snippet. For further insights on Avatar Styles refer

GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatDetails, AvatarStyle } from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("uid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  const avatarStyle = new AvatarStyle({
    backgroundColor: "#cdc2ff",
    border: "2px solid #6745ff",
    borderRadius: "10px",
    outerViewBorderColor: "#ca45ff",
    outerViewBorderRadius: "5px",
    nameTextColor: "#4554ff",
  });
  return (
    <>
      {chatGroup && (
        <CometChatDetails group={chatGroup} avatarStyle={avatarStyle} />
      )}
    </>
  );
};

export default GroupDetailsDemo;
5. LisItem Style​

To apply customized styles to the ListItemStyle component in the Details Component, you can use the following code snippet. For further insights on ListItemStyle Styles refer

GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatDetails, ListItemStyle } from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("uid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  const listItemStyle = new ListItemStyle({
    width: "100%",
    height: "100%",
    border: "2px solid red",
  });
  return (
    <>
      {chatGroup && (
        <CometChatDetails group={chatGroup} listItemStyle={listItemStyle} />
      )}
    </>
  );
};

export default GroupDetailsDemo;
6. StatusIndicator Style​

To apply customized styles to the Status Indicator in the Details Component, You can use the following code snippet. For further insights on Status Indicator Styles refer

GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatDetails } from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("uid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  const statusIndicatorStyle = {
    background: "#db35de",
    height: "10px",
    width: "10px",
  };
  return (
    <>
      {chatGroup && (
        <CometChatDetails
          group={chatGroup}
          statusIndicatorStyle={statusIndicatorStyle}
        />
      )}
    </>
  );
};

export default GroupDetailsDemo;
6. Backdrop Style​

To apply customized styles to the Backdrop component in the Details Component, you can use the following code snippet, you can use the following code snippet. For further insights on Backdrop Styles refer

GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatDetails, BackdropStyle } from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("uid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  const backdropStyle = new BackdropStyle({
    width: "100%",
    height: "100%",
    border: "2px solid red",
    background: "blue",
    borderRadius: "20px",
  });
  return (
    <>
      {chatGroup && (
        <CometChatDetails group={chatGroup} backdropStyle={backdropStyle} />
      )}
    </>
  );
};

export default GroupDetailsDemo;

Functionality​

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatDetails } from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("uid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  return (
    <>
      {chatGroup && (
        <CometChatDetails
          group={chatGroup}
          title="Your Custom Title"
          leaveConfirmDialogMessage="YOUR CUSTOM LEAVE CONFIRM DIALOG MESSAGE"
          hideProfile={true}
        />
      )}
    </>
  );
};

export default GroupDetailsDemo;

Default:

Image

Custom:

Image

Below is a list of customizations along with corresponding code snippets

PropertyDescriptionCode
title report Used to set title in the app headingtitle="Your Custom Title"
leaveButtonText report Used to set custom leave button textleaveButtonText='Your Custom Leave Button Text'
cancelButtonText report Used to set custom cancel button textcancelButtonText='Your Custom Cancel Button Text'
deleteButtonText report Used to set delete cancel button textdeleteButtonText='Your Custom delete Button Text'
transferButtonText report Used to set transfer cancel button texttransferButtonText='Your Custom transfer Button Text'
closeButtonIconURLUsed to set close button IconcloseButtonIconURL="your custom close icon url"
hideProfileUsed to hide profilehideProfile={true}
disableUsersPresenceUsed to toggle functionality to show user's presencedisableUsersPresence={true}
group report Used to pass group object of which group details to be showngroup={chatGroup}
user report Used to pass user object of logged in user for the groupuser={chatUser}
dataUsed to pass custom details templatedata?: ({user, group,}: {user?: CometChat.User;group?: CometChat.Group;}) => CometChatDetailsTemplate[];
leaveConfirmDialogMessage report Custom message for leave confirm dialogleaveConfirmDialogMessage='YOUR CUSTOM LEAVE CONFIRM DIALOG MESSAGE'
transferConfirmDialogMessage report Custom message for transfer confirm dialogtransferConfirmDialogMessage='YOUR CUSTOM TRANSFER CONFIRM DIALOG MESSAGE'
deleteConfirmDialogMessage report Custom message for delete confirm dialogdeleteConfirmDialogMessage='YOUR CUSTOM DELETE CONFIRM DIALOG MESSAGE'

Advance​

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

SubtitleView​

You can customize the subtitle view for each group to meet your requirements

subtitleView = { getSubtitleView };

Default:

GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatDetails } from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("uid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  const getSubtitleView = (group: CometChat.Group | any): JSX.Element => {
    if (group instanceof CometChat.Group) {
      return (
        <div
          style={{
            display: "flex",
            alignItems: "left",
            padding: "2px",
            fontSize: "10px",
          }}
        >
          <div style={{ color: "gray" }}>{group.getMembersCount()} members</div>
        </div>
      );
    } else {
      return <></>;
    }
  };
  return <CometChatDetails group={chatGroup} subtitleView={getSubtitleView} />;
};

export default GroupDetailsDemo;

CustomProfileView​

You can customize the subtitle view for each user item to meet your requirements

customProfileView = { getCustomProfileView };
GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatDetails } from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("uid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  function getCustomProfileView(group: CometChat.Group | any): JSX.Element {
    return (
      <div
        style={{
          display: "flex",
          alignItems: "left",
          padding: "10px",
          border: "2px solid #e9baff",
          borderRadius: "20px",
          background: "#6e2bd9",
        }}
      >
        <cometchat-avatar image={group?.getIcon()} name={group?.getName()} />

        <div style={{ display: "flex", paddingLeft: "10px" }}>
          <div
            style={{ fontWeight: "bold", color: "#ffffff", fontSize: "14px" }}
          >
            {group?.getName()}
            <div
              style={{ color: "#ffffff", fontSize: "10px", textAlign: "left" }}
            >
              {group?.getMembersCount()} members
            </div>
          </div>
        </div>
      </div>
    );
  }
  return (
    <CometChatDetails
      group={chatGroup}
      customProfileView={getCustomProfileView}
    />
  );
};

export default GroupDetailsDemo;

DetailsTemplate​

The CometChatDetailsTemplate offers a structure for organizing information in the CometChat details component. It serves as a blueprint, defining how group-related details are presented. This structure allows for customization and organization within the CometChat interface.

GroupDetailsDemo.tsx
import React, { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatDetails,
  CometChatDetailsOption,
  CometChatDetailsTemplate,
} from "@cometchat/chat-uikit-react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("uid").then((group) => {
      setChatGroup(group);
    });
  }, []);

  const getTemplate = () => {
    const getOptions = () => {
      const blockOption: CometChatDetailsOption = {
        id: "custom-block",
        title: "BLOCK USER",
        iconURL: "icon",
        iconTint: "red",
        titleFont: "16px sans-serif, Inter",
      };
      const reportOption: CometChatDetailsOption = {
        id: "custom-report",
        title: "REPORT USER",
        iconURL: "icon",
        iconTint: "red",
        titleFont: "16px sans-serif, Inter",
      };
      return [blockOption, reportOption];
    };

    let detailsTemplate: CometChatDetailsTemplate = {
      id: "Block",
      title: "BLOCK/REPORT",
      titleColor: "red",
      sectionSeparatorColor: "grey",
      itemSeparatorColor: "#6851D6",
      hideItemSeparator: false,
      options: getOptions,
    };
    return [detailsTemplate];
  };

  return <CometChatDetails group={chatGroup} data={getTemplate()} />;
};

export default GroupDetailsDemo;
Image

This defines the structure of template data for the details component.

NameTypeDescription
idStringIdentifier for the template
titleStringHeading text for the template
titleFontStringSets all the different properties of font for the title text
titleColorStringSets the foreground color of title text
itemSeparatorColorStringSets the color of the template's option separator
hideItemSeparatorBooleanWhen set to true, hides the separator under each option in a template
sectionSeparatorColorStringSets the color of the template separator
hideSectionSeparatorBooleanWhen set to true, hides the separator for the template
optionsCometChatDetailsTemplate.options?: ((loggedInUser: User | null, group: Group | null, section: string) => CometChatDetailsOption[]) | null | undefineddefines the structure for individual options

DetailsOption​

The DetailsOption defines the structure for individual options within the CometChat details component, facilitating customization and functionality for user interactions.

This defines the structure of each option for a template in the details component.

NameTypeDescription
idStringIdentifier for the template option
titleStringHeading text for the template option
tailanyUser-defined UI component to customise the trailing view for each option in a template.
customViewanyUser-defined UI component to override the default view for the option.
onClick((item: CometChat.User | CometChat.Group) => void) | null;Function invoked when user clicks on the option.
titleFontStringSets all the different properties of font for the title text
titleColorStringSets the foreground colour of title text
iconURLStringImage url for the icon to symbolise an option
iconTintStringColor applied to the icon of the option
backgroundColorStringColor applied to the background of the option

Configurations​

Configurations offer the ability to customize the properties of each component within a Composite Component.

CometChatDetails has Add Members, Banned Members, Transfer Ownership and Group Members component. Hence, each of these components will have its individual `Configuration``.

  • Configurations expose properties that are available in its individual components.

Group Members​

You can customize the properties of the Group Members component by making use of the groupMembersConfiguration. You can accomplish this by employing the groupMembersConfiguration props as demonstrated below:

 groupMembersConfiguration={new GroupMembersConfiguration({
  //override properties of group members
  })}

All exposed properties of GroupMembersConfiguration can be found under Group Members. Properties marked with the report symbol are not accessible within the Configuration Object.

Example

Let's say you want to change the style of the Group Member subcomponent and, in addition, you only want to hide separator and left allign the title.

You can modify the style using the groupMembersStyle property, hide the separator using hideSeparator property and allign the title using titleAlignment property.

Image
GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatDetails,
  GroupMembersConfiguration,
  TitleAlignment,
  GroupMembersStyle,
} from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("uid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  const groupMembersStyle = new GroupMembersStyle({
    background: "#b17efc",
    searchPlaceholderTextColor: "#ffffff",
    titleTextColor: "#000000",
    searchBackground: "#5718b5",
  });
  return (
    <>
      {chatGroup && (
        <CometChatDetails
          group={chatGroup}
          groupMembersConfiguration={
            new GroupMembersConfiguration({
              //properties of group members
              hideSeparator: true,
              titleAlignment: TitleAlignment.left,
              groupMembersStyle: groupMembersStyle,
            })
          }
        />
      )}
    </>
  );
};

export default GroupDetailsDemo;

Add Members​

You can customize the properties of the Add Members component by making use of the AddMembersConfiguration. You can accomplish this by employing the addMembersConfiguration props as demonstrated below:

 addMembersConfiguration={new AddMembersConfiguration({
  //override properties of add members
  })}

All exposed properties of AddMembersConfiguration can be found under Add Members. Properties marked with the report symbol are not accessible within the Configuration Object.

Example

Let's say you want to change the style of the Add Members subcomponent and, in addition, you only want to show section header.

You can modify the style using the addMembersStyle property and show the section header using showSectionHeader property.

Image
GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatDetails,
  AddMembersConfiguration,
  AddMembersStyle,
} from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("uid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  const addMembersStyle = new AddMembersStyle({
    addMembersButtonBackground: "#6716c9",
    addMembersButtonTextColor: "#ffffff",
    background: "#d6b9fa",
    searchBackground: "#6716c9",
    searchPlaceholderTextColor: "#ffffff",
    titleTextColor: "#ffffff",
    searchIconTint: "#ffffff",
    separatorColor: "#6716c9",
    sectionHeaderTextColor: "#ffffff",
    backButtonIconTint: "#000000",
  });
  return (
    <>
      {chatGroup && (
        <CometChatDetails
          group={chatGroup}
          addMembersConfiguration={
            new AddMembersConfiguration({
              //properties of add member component
              showSectionHeader: true,
              addMembersStyle: addMembersStyle,
            })
          }
        />
      )}
    </>
  );
};

export default GroupDetailsDemo;

Banned Members​

You can customize the properties of the Banned Members component by making use of the BannedMembersConfiguration. You can accomplish this by employing the bannedMembersConfiguration props as demonstrated below:

 bannedMembersConfiguration={new BannedMembersConfiguration({
  //override properties of banned members
  })}

All exposed properties of BannedMembersConfiguration can be found under Banned Members. Properties marked with the report symbol are not accessible within the Configuration Object.

Example

Let's say you want to change the style of the Banned Members subcomponent and, in addition, you only want to hide the search bar.

You can modify the style using the bannedMembersStyle property and hide the search bar using hideSearch property.

Image
GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatDetails,
  BannedMembersConfiguration,
  BannedMembersStyle,
} from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("uid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  const bannedMembersStyle = new BannedMembersStyle({
    background: "#d6b9fa",
    titleTextColor: "#ffffff",
    separatorColor: "#6d1fcf",
    onlineStatusColor: "#b1f029",
  });
  return (
    <>
      {chatGroup && (
        <CometChatDetails
          group={chatGroup}
          bannedMembersConfiguration={
            new BannedMembersConfiguration({
              //properties of banned members
              hideSearch: true,
              bannedMembersStyle: bannedMembersStyle,
            })
          }
        />
      )}
    </>
  );
};

export default GroupDetailsDemo;

Transfer Ownership​

You can customize the properties of the Transfer Ownership component by making use of the TransferOwnershipConfiguration. You can accomplish this by employing the transferOwnershipConfiguration props as demonstrated below:

 transferOwnershipConfiguration={new TransferOwnershipConfiguration({
  //override properties of Transfer Ownership
  })}

All exposed properties of TransferOwnershipConfiguration can be found under Transfer Ownership. Properties marked with the report symbol are not accessible within the Configuration Object.

Example

Let's say you want to change the style of the Transfer Ownership subcomponent and, in addition, you only want to disable the users presence.

You can modify the style using the transferOwnershipStyle property and disable the users presence using disableUsersPresence property.

GroupDetailsDemo.tsx
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatDetails,
  TransferOwnershipConfiguration,
  transferOwnershipStyle,
} from "@cometchat/chat-uikit-react";
import React from "react";

const GroupDetailsDemo = () => {
  const [chatGroup, setChatGroup] = React.useState<CometChat.Group>();

  React.useEffect(() => {
    CometChat.getGroup("uid").then((group) => {
      setChatGroup(group);
    });
  }, []);
  const transferOwnershipStyle = new TransferOwnershipStyle({
    background: "#e9c4ff",
    MemberScopeTextColor: "#ffffff",
    transferButtonTextColor: "#ffffff",
    MemberScopeTextFont: "#ffffff",
    cancelButtonTextColor: "#ffffff",
  });
  return (
    <>
      {chatGroup && (
        <CometChatDetails
          group={chatGroup}
          transferOwnershipConfiguration={
            new TransferOwnershipConfiguration({
              //properties of transfer ownership
              transferOwnershipStyle: transferOwnershipStyle,
              disableUsersPresence: true,
            })
          }
        />
      )}
    </>
  );
};

export default GroupDetailsDemo;