# Quick Guide

# STEP2. Open a chat room

# STEP3. Writing & Running Source Code

# Preparations

To run React UI Kit, you need the following materials.

Node.js
npm (or whatever package manager you use)

Add the following content to index.html. Write two script tags between head.

<head>
  <!-- ...your code -->
  <script src="https://www.vchatcloud.com/lib/e7lib-latest.min.js"></script>
  <script src="https://www.vchatcloud.com/lib/vchatcloud-last.min.js"></script>
</head>

1
2
3
4
5

After that, enter the following into App.tsx. However, the necessary values are replaced with new ones.

roomId: Enter the Channel Key copied in step 1.
clientKey: Unique key value that does not overlap between users
nickName: User nickname

import { VChatCloudApp, ChannelUserGrade } from "@vchatcloud/react-ui-kit";
import { FC, useEffect, useRef } from "react";

const App: FC = () => {
  const [roomId, clientKey, nickName, grade, userInfo] = [
    "YOUR_ROOM_ID",
    // You can use any value you want for clientKey, but be careful not to duplicate it between users.
    // When logging in with the same clientKey, the previously logged in user will be disconnected.
    // Alternatively, you can call and use the `setRandomClientKey` function.
    "YOUR_CLIENT_KEY",
    "YOUR_NICKNAME",
    "user",
    { profile: 1 },
  ];
  const privateContainer = useRef<HTMLDivElement>(null);

  // When using private container
  useEffect(() => {
    if (!privateContainer.current) return;
    privateContainer.current.style.display = "none";

    const observer = new MutationObserver(() => {
      if (!privateContainer.current) return;

      privateContainer.current.style.display =
        privateContainer.current.children.length === 0 ? "none" : "block";
    });
    observer.observe(privateContainer.current, { childList: true });

    return () => observer.disconnect();
  }, []);

  return (
    <>
      <div className="app" style={{ width: "100%", height: "100vh" }}>
        <VChatCloudApp
          clientKey={clientKey}
          email="YOUR_EMAIL" // VChatCloud CMS account ID
          grade={grade}
          nickName={nickName}
          privateContainer=".private-container" // querySelector parameter or HTMLElement
          roomId={roomId}
          sessionType="parameter"
          userInfo={userInfo}
          // logoUrl="LOGO_IMG_URL"
          // company="YOUR_COMPANY_NAME"
        />
      </div>
      {/* wrapper for private chat */}
      <div
        className="app private-container"
        ref={privateContainer}
        style={{ width: "100%", height: "100vh" }}
      />
    </>
  );
};

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

Overview →

# Quick Guide

# STEP1. Sign up for free

# STEP2. Open a chat room

# STEP3. Writing & Running Source Code

# Preparations