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 [email protected]

• React DOM npm install [email protected]

• React scripts npm install [email protected]

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

  npm install @cometchat-pro/[email protected] --save

2. Configure CometChat inside your app

i. Import CometChat SDK

  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.

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

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

• Clone this repository git clone https://github.com/cometchat-pro/cometchat-pro-react-ui-kit.git
• Copy the cloned repository to your source folder

• Copy all the dependencies from package.json into your project's package.js and install them

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

  import { CometChatUI } from "./CometChatWorkspace/src";

  class App extends React.Component {

    render() {

      return (
        <div style={{width: '800px', height:'800px' }}>
          <CometChatUI />
        </div>
      )
    }
  }

Checkout our sample app

Visit our React sample app repo to run the React sample app.

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 👨‍💻 @ajaygajra 👨‍💻 @prathamesh-majgaonkar 👨‍💻 @mayur-bhandari

Contact :mailbox:

Contact us via real time support present in CometChat Dashboard.

License

This project uses the following license.