v1.0.2

Content verified

README.md

@@ -1,35 +1,42 @@
 
-# What is UI Kit
-The UI Kit library is collection of custom UI Component and UI Screens design to build chat application within few minutes.
-UI kit is designed to avoid boilerplate code for building UI, it has three different ways to build a chat application with fully customizable UI. It will help developers to build a chat application within using various UI Components.
+# React Chat UI Kit
+React Chat UI Kit is a collection of custom UI Components and UI Screens designed to build chat application with fully customizable UI. It is designed to avoid boilerplate code for building UI. 
 
+![alt text](https://files.readme.io/68c7762-launch_cometchat.png "UI Unified")
 
-## Setup
- Follow the below mentioned steps for easy setup and seamless integration with UI Kit
+It has the following 3 ways of implementation:
+* [UI Unified](https://prodocs.cometchat.com/docs/react-ui-kit-ui-unified)
+* [UI Screens](https://prodocs.cometchat.com/docs/react-ui-kit-ui-screens)
+* [UI Components](https://prodocs.cometchat.com/docs/react-ui-kit-ui-components)
 
-### Get your Application Keys
-<a href="https://app.cometchat.io/" traget="_blank">Signup for CometChat</a> and then:
+## Requirements
+ 1. [CometChat Account](#cometchat-account)
 
-* Create a new app
-* Head over to the Auth Keys section in API Keys and note the `API_Key` and `App_ID`
----
+### CometChat Account
+To use this library, you need application keys from your CometChat account. If you don't have an account, you can create one <a href="https://app.cometchat.io/" target="_blank">here</a>.
+
+1. Sign in to your <a href="https://app.cometchat.io/" target="_blank">CometChat Dashboard</a>
+2. Click **Add New App**
+3. Give your app a name, and select a region and click  Add App
+4. Click your new app to open its settings.
+5. Locate API Keys and Create Auth Key. You'll need `App ID`, `Auth Key` and `Region`
 
 
-### Add the CometChat Dependency
+### Install CometChat SDK
 
-install `@cometchat-pro/chat` using `npm`.
 ```javascript
     npm install @cometchat-pro/chat@2.0.8 --save
 ```
+---
 
 ### 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
-var appID = "APP_ID";
-var region = "REGION";
-var appSetting = new CometChat.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(region).build();
+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");
@@ -42,23 +49,23 @@ CometChat.init(appID, appSetting).then(
 );
 ```
 **Note:**
-Make sure you replace the APP_ID with your CometChat `App_ID` and `REGION` with your app region in the above code.
+Replace APP_ID and REGION with your CometChat `App ID` and `REGION` in the above code.
 
 ### Log in your User
 
 Once initialization is successful, you will need to create a user.
-To create users on the fly, you can use the createUser() method. This method takes a User object and the API Key as input parameters and returns the created User object if the request is successful.
+To create users on the fly, you can use the createUser() method. This method takes a User object and the `Auth Key` as input parameters and returns the created User object if the request is successful.
 
 ```javascript
-let apiKey = "API_KEY";
-var uid = "user1";
-var name = "Kevin";
+const authKey = "AUTH_KEY";
+const uid = "UID";
+const name = "NAME";
 
-var user = new CometChat.User(uid);
+const user = new CometChat.User(uid);
 
 user.setName(name);
 
-CometChat.createUser(user, apiKey).then(
+CometChat.createUser(user, authKey).then(
     user => {
         console.log("user created", user);
     },error => {
@@ -68,29 +75,22 @@ CometChat.createUser(user, apiKey).then(
 });
 ```
 **Note:** </br>
-* Make sure you replace the `API_KEY` with your CometChat API Key in the above code.
+* Replace `AUTH_KEY` with your CometChat `Auth Key` in the above code.
+* Replace `UID` and `NAME` with the uid and name of the user to be created.
 * We have setup 5 users for testing having UIDs: `SUPERHERO1`, `SUPERHERO2`, `SUPERHERO3`,`SUPERHERO4` and `SUPERHERO5`.
 
 
 
-## Add UI Kit to your project
-After adding necessary dependancies inside you app to integrate UI Kit inside your app. Kindly follow the below steps:
-
-1. Simply clone the UI Kit Library from react-chat-uikit repository.
-2. Copy the CometChat folder to your project lib folder
-3. npm install node-sass
-4. Start using CometChat Components by following the example code.
-
+## Usage
+1. Download or clone this repository
+2. Copy the CometChat folder to your project folder
+3. Import the components.
 
+Here is an implementation of UI Unified. 
 
-### Launch UI Unified
-
-*UI Unified is a way to launch a fully working chat application using the UI Kit .In UI Unified all the UI Screens and UI Components working together to give the full experience of a chat application with minimal coding effort.*
-
- Add the following code snippet in `onSuccess` of CometChat `login`.
 
  ```html
- import {CometChatUnified } from "./lib/cometchat";
+ import {CometChatUnified} from "./cometchat";
  render() {
     return (
         <CometChatUnified/>
@@ -101,10 +101,7 @@ After adding necessary dependancies inside you app to integrate UI Kit inside yo
 
 
 
+## Further Information
+ Please refer our [Documentation](https://prodocs.cometchat.com/docs/react-ui-kit) for more information about how to integrate UI Kit to your applications.
 
- To read the full dcoumentation on UI Kit integration visit our [Documentation](https://prodocs.cometchat.com/docs/react-ui-kit)
-
-
-
-## Troubleshooting
-Facing any issues while integrating or installing the UI Kit please <a href="https://forum.cometchat.com/"> visit our forum</a>.
+Please visit our [Forum](https://forum.cometchat.com/) if you are facing any issues while installation or integration of this library.