# Get started

VChatCloud React UI Kit is a library that allows you to easily integrate VChatCloud services into your React project.

# Install library

Enter the command to add @vchatcloud/react-ui-kit as a dependency to the project.

npm install @vchatcloud/react-ui-kit
#or
# yarn add @vchatcloud/react-ui-kit
#or
# pnpm add @vchatcloud/react-ui-kit

1
2
3
4
5

# How to use

First, 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

To use the UI Kit in your project, import and use the necessary components. You can set up and run VChatCloud using the VChatCloudApp component.

# Code example

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

# Component description

# VChatCloudApp

The VChatCloudApp component is the main component that sets up and runs the VChatCloud service. The main props are:

clientKey: User's unique client key.
email: VChatCloud CMS account ID.
grade: User grade (user, userManager, etc.).
nickName: User nickname.
roomId: Chat room ID.
privateContainer: HTML container for private chat (querySelector parameter or HTMLElement).
sessionType: session type
- login: Using the login screen, users can set their desired nickname and profile.
- parameter: Retrieves and uses user information as a parameter. We will use information specified by the developer.
- private: The user's information is retrieved and used in the same way as the parameter, but is set when using secret chat.
userInfo: Additional user information (in object form). If you specify a number in userInfo.profile, you can use the default profile image. (1 to 48 provided)
logoUrl: You can change the logo image to be displayed on the login screen.
company: You can change the company information in the footer to be displayed on the login screen.

# Caution

Need to disable StrictMode: When running as a development server, StrictMode must be disabled to prevent errors from occurring.
Caution with duplicate clientKey: When logging in with the same clientKey, the previously logged in user will be disconnected. You can generate a random clientKey using the setRandomClientKey function.

← Overview Customizing →