Skip to main content
Version: v4

Create Group

Overview

CometChatCreateGroup is a Component enabling users to create various types of groups, including public, private, and password-protected ones. This functionality enables users to curate their group settings according to their preferences and needs.

Image

The Create Groups component is composed of the following BaseComponents:

ComponentsDescription
cometchat-buttonThis component represents a button with optional icon and text.
cometchat-labelThis component provides descriptive information about the associated UI element.
cometchat-inputThis component allows users to enter or provide data or information within a web form or interface.

Usage

Integration

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

import { CometChatCreateGroup } from "@cometchat/chat-uikit-react";
import React from "react";
import { createComponent } from "@lit-labs/react";

const CreateGroupDemo = () => {
const CreateGroup = createComponent({
tagName: "cometchat-create-group",
elementClass: CometChatCreateGroup,
react: React,
});

return <CreateGroup />;
};

export default CreateGroupDemo;

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. createClick

The createClick action is activated when you click the create Group button. This returns the created groups. You can override this action using the following code snippet.

CreateGroupDemo.tsx
import { CometChatCreateGroup } from "@cometchat/chat-uikit-react";
import React from "react";
import { createComponent } from "@lit-labs/react";

const CreateGroupDemo = () => {
const CreateGroup = createComponent({
tagName: "cometchat-create-group",
elementClass: CometChatCreateGroup,
react: React,
});

function handleClick(group: CometChat.Group): void {
console.log("custom on create click actions");
}

return <CreateGroup createClick={handleClick} />;
};

export default CreateGroupDemo;
2. closeCallback

The closeCallback action is activated when you click the close button. You can override this action using the following code snippet.

CreateGroupDemo.tsx
import { CometChatCreateGroup } from "@cometchat/chat-uikit-react";
import React from "react";
import { createComponent } from "@lit-labs/react";

const CreateGroupDemo = () => {
const CreateGroup = createComponent({
tagName: "cometchat-create-group",
elementClass: CometChatCreateGroup,
react: React,
});

const handleCloseCallBack = () =>{
console.log("CLOSE");
}

return <CreateGroup closeCallback={handleCloseCallBack} />;
};

export default CreateGroupDemo;
3. errorCallback

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

CreateGroupDemo.tsx
import { CometChatCreateGroup } from "@cometchat/chat-uikit-react";
import React from "react";
import { createComponent } from "@lit-labs/react";

const CreateGroupDemo = () => {
const CreateGroup = createComponent({
tagName: "cometchat-create-group",
elementClass: CometChatCreateGroup,
react: React,
});

const handleOnError = ()=>{
console.log("error");
}

return <CreateGroup errorCallback={handleOnError} />;
};

export default CreateGroupDemo;

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.

The CreateGroup component does not have any exposed 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.

Events emitted by the Create Group component is as follows.

EventDescription
ccGroupCreatedTriggers when the user creates a group successfully
const ccGroupCreated = CometChatGroupEvents.ccGroupCreated.subscribe(
(group: CometChat.Group) => {
//Your Code
}
);

ccGroupCreated?.unsubscribe();

Customization

To fit your app's design requirements, you can customize the appearance of the Create Groups 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. CreateGroup Style

You can set the CreateGroupStyle to the Create Group Component to customize the styling.

Image
CreateGroupDemo.tsx
import {
CometChatCreateGroup,
CreateGroupStyle,
} from "@cometchat/chat-uikit-react";
import React from "react";
import { createComponent } from "@lit-labs/react";

const CreateGroupDemo = () => {
const CreateGroup = createComponent({
tagName: "cometchat-create-group",
elementClass: CometChatCreateGroup,
react: React,
});

const createGroupStyle = new CreateGroupStyle({
background: "#e2d6ff",
activeGroupTypeBackground: "#bdbae0",
activeGroupTypeTextColor: "#000000",
height: "500px",
width: "500px",
});

return <CreateGroup createGroupStyle={createGroupStyle} />;
};

export default CreateGroupDemo;

List of properties exposed by CreateGroupStyle

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;
boxShadowSets shadow effects around the elementboxShadow?: string;
groupTypeTextFontSets the font style of the text indicating group typesgroupTypeTextFont?: string;
groupTypeBorderSets the border style for group type indicatorsgroupTypeBorder?: string;
groupTypeBorderRadiusSets the border radius for group type indicatorsgroupTypeBorderRadius?: string;
groupTypeTextColorSets the color of the text indicating group typesgroupTypeTextColor?: string;
groupTypeTextBackgroundSets the background color for text indicating group typesgroupTypeTextBackground?: string;
groupTypeBackgroundSets the background color for group type indicatorsgroupTypeBackground?: string;
groupTypeBoxShadowSets shadow effects around the group type indicatorsgroupTypeBoxShadow?: string;
activeGroupTypeTextFontSets the font style of the text indicating active group typesactiveGroupTypeTextFont?: string;
activeGroupTypeTextColorSets the color of the text indicating active group typesactiveGroupTypeTextColor?: string;
activeGroupTypeBackgroundSets the background color for active group type indicatorsactiveGroupTypeBackground?: string;
activeGroupTypeBoxShadowSets shadow effects around the active group type indicatorsactiveGroupTypeBoxShadow?: string;
activeGroupTypeBorderRadiusSets the border radius for active group type indicatorsactiveGroupTypeBorderRadius?: string;
activeGroupTypeBorderSets the border style for active group type indicatorsactiveGroupTypeBorder?: string;
groupTypeTextBoxShadowSets shadow effects around the group type indicators containergroupTypeTextBoxShadow?: string;
groupTypeTextBorderRadiusSets the border radius for the container of group type indicatorsgroupTypeTextBorderRadius?: string;
closeIconTintSets the color of the close iconcloseIconTint?: string;
titleTextFontSets the font style for the title text in the app bartitleTextFont?: string;
titleTextColorSets the color for the title text in the app bartitleTextColor?: string;
errorTextFontSets the font style for error messageserrorTextFont?: string;
errorTextBackgroundSets the background color for error messageserrorTextBackground?: string;
errorTextBorderRadiusSets the border radius for error messageserrorTextBorderRadius?: string;
errorTextBorderSets the border style for error messageserrorTextBorder?: string;
errorTextColorSets the color for error messageserrorTextColor?: string;
nameInputPlaceholderTextFontSets the font style for placeholder text in the name input fieldnameInputPlaceholderTextFont?: string;
nameInputPlaceholderTextColorSets the color for placeholder text in the name input fieldnameInputPlaceholderTextColor?: string;
nameInputBackgroundSets the background color for the name input fieldnameInputBackground?: string;
nameInputTextFontSets the font style for text in the name input fieldnameInputTextFont?: string;
nameInputTextColorSets the color for text in the name input fieldnameInputTextColor?: string;
nameInputBorderSets the border style for the name input fieldnameInputBorder?: string;
nameInputBorderRadiusSets the border radius for the name input fieldnameInputBorderRadius?: string;
nameInputBoxShadowSets shadow effects around the name input fieldnameInputBoxShadow?: string;
passwordInputPlaceholderTextFontSets the font style for placeholder text in the password input fieldpasswordInputPlaceholderTextFont?: string;
passwordInputPlaceholderTextColorSets the color for placeholder text in the password input fieldpasswordInputPlaceholderTextColor?: string;
passwordInputBackgroundSets the background color for the password input fieldpasswordInputBackground?: string;
passwordInputBorderSets the border style for the password input fieldpasswordInputBorder?: string;
passwordInputBorderRadiusSets the border radius for the password input fieldpasswordInputBorderRadius?: string;
passwordInputBoxShadowSets shadow effects around the password input fieldpasswordInputBoxShadow?: string;
passwordInputTextFontSets the font style for text in the password input fieldpasswordInputTextFont?: string;
passwordInputTextColorSets the color for text in the password input fieldpasswordInputTextColor?: string;
createGroupButtonTextFontSets the font style for text on the create group buttoncreateGroupButtonTextFont?: string;
createGroupButtonTextColorSets the color for text on the create group buttoncreateGroupButtonTextColor?: string;
createGroupButtonBackgroundSets the background color for the create group buttoncreateGroupButtonBackground?: string;
createGroupButtonBorderRadiusSets the border radius for the create group buttoncreateGroupButtonBorderRadius?: string;
createGroupButtonBorderSets the border style for the create group buttoncreateGroupButtonBorder?: string;

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.

CreateGroupDemo.tsx
import { CometChatCreateGroup } from "@cometchat/chat-uikit-react";
import React from "react";
import { createComponent } from "@lit-labs/react";

const CreateGroupDemo = () => {
const CreateGroup = createComponent({
tagName: "cometchat-create-group",
elementClass: CometChatCreateGroup,
react: React,
});

return (
<CreateGroup
title="Your Custom Title"
createGroupButtonText="Your Custom Create Group Button Text"
hideCloseButton={true}
/>
);
};

export default CreateGroupDemo;

Default:

Image

Custom:

Image
PropertyDescriptionCode
titleCustom title for the componenttitle='Your Custom Title'
createGroupButtonTextCustom text for the create group buttoncreateGroupButtonText='Your Custom Create Group Button Text'
nameInputPlaceholderTextCustom placeholder text for name input fieldnameInputPlaceholderText='Your Custom Name InputPlaceholder Text'
passwordInputPlaceholderTextCustom placeholder text for password input fieldpasswordInputPlaceholderText='Your Custom Password Input Placeholder Text'
errorStateTextCustom error state texterrorStateText='Your Custom Error State Text'
closeButtonIconURLURL for a custom close button iconcloseButtonIconURL='Custom Close Icon'
hideCloseButtonWhether to hide the close buttonhideCloseButton={true}

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.

the Create Group component does not offer any advanced functionalities beyond this level of customization.