Skip to content

Latest commit

 

History

History
56 lines (41 loc) · 2.68 KB

README.md

File metadata and controls

56 lines (41 loc) · 2.68 KB
Raw

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:

    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.