CometChat React UI Kit

CometChat React UI Kit is a collection of custom UI Components designed to build text chat and voice/video calling features in your application.

The UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly.

---

Features

• Private(1-1) & Group Conversations
• Voice & video calling & conferencing
• Rich Media Attachments
• Typing Indicators
• Text, Media and Custom messages
• Read receipts
• Online Presence Indicators
• Message History
• Users & Friends List
• Search by users and groups
• Groups List
• Conversations List
• Threaded Conversations

Extensions

Thumbnail Generation | Link Preview | Rich Media Preview | Smart Reply| Emojis | Polls | Reactions | Stickers

---

Prerequisites

Before you begin, ensure you have met the following requirements:

• A text editor, to write code in. This could be a text editor (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, or VIM)

• Node

• npm

• React npm install react@18.2.0

• React DOM npm install react-dom@18.2.0

• React scripts npm install react-scripts@4.0.3

---

Installing React UI Kit

1. Setup :wrench:

i. Register on CometChat 🔧

To install React UI Kit, you need to first register on CometChat Dashboard. Click here to sign up

ii. Get your Application Keys :key:

• Create a new app. Please follow the steps provided in the Key concepts guide to create V3 apps before you proceed.
• Head over to the Quick Start or API & Auth Keys section and note the App ID, Auth Key, and Region.

iii. Add the CometChat Dependency

1  npm install @cometchat-pro/chat@3.0.10 --save

2. Configure CometChat inside your app

i. Import CometChat SDK

1  import { CometChat } from "@cometchat-pro/chat";

ii. Initialize CometChat 🌟

The init() method initializes the settings required for CometChat. We suggest calling the init() method on app startup, preferably in the onCreate() method of the Application class.

1const appID = "APP_ID";
2const region = "REGION";
3const appSetting = new CometChat.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(region).build();
4CometChat.init(appID, appSetting).then(
5  () => {
6    console.log("Initialization completed successfully");
7    // You can now call login function.
8  },
9  error => {
10    console.log("Initialization failed with error:", error);
11    // Check the reason for error and take appropriate action.
12  }
13);

Note:

• Replace APP_ID and REGION with your CometChat App ID and Region in the above code.

iii. Login your user 👤

This method takes UID and Auth Key as input parameters and returns the User object containing all the information of the logged-in user..

1const authKey = "AUTH_KEY";
2const uid = "SUPERHERO1";
3
4CometChat.login(uid, authKey).then(
5  user => {
6    console.log("Login Successful:", { user });    
7  },
8  error => {
9    console.log("Login failed with exception:", { error });    
10  }
11);

Note:

• Replace AUTH_KEY with your CometChat Auth Key in the above code.

• We have setup 5 users for testing having UIDs: SUPERHERO1, SUPERHERO2, SUPERHERO3,SUPERHERO4 and SUPERHERO5.

3. Add UI Kit to your project

• Run npm i @cometchat-pro/react-ui-kit --save in your terminal and use the components in your React app.

4. Launch CometChat

Using the CometChatConversationsWithMessages component, you can launch a fully functional chat module.

Usage

• Import CometChatConversationsWithMessages component
• Embed CometChatConversationsWithMessages component in container and provide an appropriate width and height to the container

1  import { CometChatConversationsWithMessages } from "@cometchat-pro/react-ui-kit";
2
3  class App extends React.Component {
4
5    render() {
6
7      return (
8        <div style={{width: '800px', height:'800px' }}>
9          <CometChatConversationsWithMessages />
10        </div>
11      )
12    }
13  }

Checkout our sample app

Checkout our sample app provided in examples folder.

---

Troubleshooting

• To read the full documentation on UI Kit integration visit our Documentation.

• Facing any issues while integrating or installing the UI Kit please connect with us via real time support present in CometChat Dashboard.

---

Contributors

Thanks to the following people who have contributed to this project:

👨‍💻 @priyadarshininadar
👨‍💻 @prakash-cometchat
👨‍💻 @aaliya-shaikh
👨‍💻 @ramnayanyadav

---

Contact :mailbox:

Contact us via real time support present in CometChat Dashboard.

---

License

---

This project uses the following license.