React Sample App by CometChat

This is a reference application showcasing the integration of CometChat's React UI Kit within a React framework. It provides developers with examples of implementing real-time messaging and voice and video calling features in their own React-based applications.

🚀 Try the New v5 UI Kit!

Discover the all-new v5 UI Kit, featuring a completely revamped design for enhanced usability and visual appeal. With restructured components, advanced styling options, and a streamlined integration process, v5 offers a seamless, customizable experience tailored to your needs. Try it now and elevate your development workflow!

Prerequisites

• Ensure that you have Node.js and npm installed:

    npm install npm@latest -g

• Sign up for a CometChat account to get your app credentials: App ID, Region, and Auth Key

Installation

1. Clone the repository:

     git clone https://github.com/cometchat/cometchat-sample-app-react.git

2. Navigate to the cloned directory:

     cd cometchat-sample-app-react

3. Install dependencies:

     npm install

4. Enter your CometChat App ID, Region, and Auth Key in the src/AppConstants.ts file:

   cometchat-uikit-react/src/AppConstants.ts

   Lines 1 to 7 in d294da6

   	// Head over to the Credentials section in your app on CometChat Dashboard and where you can find your unique App ID, Region and Auth Key. 😊
   	export const AppConstants = {
   	APP_ID: "APP_ID",
   	REGION: "REGION",
   	AUTH_KEY: "AUTH_KEY",
   	};

5. If your app is created before August 12th, 2024 then change the sample data URL to https://assets.cometchat.io/sampleapp/v1/sampledata.json in the src/components/Login/index.tsx file:

   cometchat-uikit-react/src/components/Login/index.tsx

   Lines 43 to 45 in d294da6

   	try {
   	const response = await fetch("https://assets.cometchat.io/sampleapp/sampledata.json");
   	const data : UserJson = await response.json();

6. Run the project locally to see all CometChat features in action:

     npm run start
   

Help and Support

For issues running the project or integrating with our UI Kits, consult our documentation or create a support ticket or seek real-time support via the CometChat Dashboard.