tencent cloud

npx create-react-app sample-chat --template typescript

cd sample-chat

npm install @tencentcloud/chat-uikit-react

import React, { useEffect, useState } from 'react';
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<any>();
  const init = () => {
    const loginInfo: any = {
      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(() => {
    (async ()=>{
      const chat = await init()
      setChat(chat)
    })()
  }, [])


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

 npm run start