React

import React, { useEffect, useState } from 'react';
import { ChatSDK } from '@tencentcloud/chat';
import { TUIKit } from '@tencentcloud/chat-uikit-react';
import { TUILogin } from '@tencentcloud/tui-core';
import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';

export default function SampleChat() {
  const [chat, setChat] = useState<ChatSDK>();
  const init = () => {
    const loginInfo = {
      SDKAppID: 0, // Your SDKAppID. Get it from Step 4
      userID: 'xxx', // Your userID. Get it from Step 5
      // UserSig is a cipher for a user to log in to IM. It is the ciphertext generated by encrypting information such as userID. Get it from Step 5
      userSig: 'xxx', // Your userSig. Get it from Step 5
      useUploadPlugin: true,
    };
    TUILogin.login(loginInfo).then(() => {
      const { chat } = TUILogin.getContext();
      setChat(chat);
    }).catch(() => {});
  }
  useEffect(() => {
    init();
  }, [])


  return (
    <TUIKit chat={chat} language={'en'}></TUIKit>   // language support en or zh
  ) 
}