# 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](https://prodocs.cometchat.com/docs/extensions-thumbnail-generation) | [Link Preview](https://prodocs.cometchat.com/docs/extensions-link-preview) | [Rich Media Preview](https://prodocs.cometchat.com/docs/extensions-rich-media-preview) | [Smart Reply](https://prodocs.cometchat.com/docs/extensions-smart-reply)| [Emojis](https://prodocs.cometchat.com/docs/extensions-emojis) | [Polls](https://prodocs.cometchat.com/docs/extensions-polls) | [Reactions](https://prodocs.cometchat.com/docs/extensions-reactions) | [Stickers](https://prodocs.cometchat.com/docs/extensions-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](https://code.visualstudio.com/), [Notepad++](https://notepad-plus-plus.org/), [Sublime Text](https://www.sublimetext.com/), [Atom](https://atom.io/), or [VIM](https://www.vim.org/))
- [Node](https://nodejs.org/)
- [npm](https://www.npmjs.com/get-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
```javascript
npm install @cometchat-pro/chat@3.0.10 --save
```
## 2. Configure CometChat inside your app
### i. Import CometChat SDK
```javascript
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.
```javascript
const appID = "APP_ID";
const region = "REGION";
const appSetting = new CometChat.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(region).build();
CometChat.init(appID, appSetting).then(
() => {
console.log("Initialization completed successfully");
// You can now call login function.
},
error => {
console.log("Initialization failed with error:", error);
// Check the reason for error and take appropriate action.
}
);
```
**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..
```javascript
const authKey = "AUTH_KEY";
const uid = "SUPERHERO1";
CometChat.login(uid, authKey).then(
user => {
console.log("Login Successful:", { user });
},
error => {
console.log("Login failed with exception:", { error });
}
);
```
**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 **CometChatUI** component, you can launch a fully functional chat application. In this component all the UI Screens and UI Components are interlinked and work together to launch a fully functional chat on your website/application.
### Usage
* Import CometChatUI component
* Embed CometChatUI component in container and provide an appropriate width and height to the container
```javascript
import { CometChatConversationsWithMessages } from "cometchat-react-ui-kit2";
class App extends React.Component {
render() {
return (
)
}
}
```
# 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](https://www.cometchat.com/docs/react-chat-ui-kit/overview).
- 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](https://github.com/priyadarshininadar)
[👨💻 @prakash-cometchat](https://github.com/prakash-cometchat)
[👨💻 @aaliya-shaikh](https://github.com/aaliya-shaikh)
[👨💻 @ramnayanyadav](https://github.com/ramnayanyadav)
---
# Contact :mailbox:
Contact us via real time support present in [CometChat Dashboard](https://app.cometchat.com/).
---
# License
---
This project uses the following [license](https://github.com/cometchat-pro/cometchat-pro-react-ui-kit/blob/master/LICENSE).
