Skip to content

Voice & Video Calling and Text Chat App for React (JavaScript/Web)

License

Notifications You must be signed in to change notification settings

cometchat/cometchat-uikit-react

Repository files navigation

CometChat

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