Skip to main content

Bắt đầu

Yêu cầu​

  • React phiên bản 17.0.0 hoặc cao hơn
  • React DOM phiên bản 17.0.0 hoặc cao hơn

Cài đặt​

Cài đặt SDK vào dự án với:

  • Yarn
yarn add @communi/chat-react
  • NPM
npm i @communi/chat-react
  • PNPM
pnpm install @communi/chat-react

Typescript​

Hiện tại SDK chưa hỗ trợ hoàn toàn với TypeScript. Vì vậy để sử dụng SDK của chúng tôi với TypeScript vui lòng thêm tệp có nội dung sau vào trong mã nguồn của bạn.

communi-chat-react.d.ts

declare module "@communi/chat-react" {
  const PSChatProvider: any;
  const PSThreadList: any;
  const PSConversation: any;
  const PSUIProvider: any;
  export = { PSChatProvider, PSThreadList, PSConversation, PSUIProvider };
  export default { PSChatProvider, PSThreadList, PSConversation, PSUIProvider };
}

Webpack​

Nếu bạn đang sử dụng Webpack v5 thì cần cài đặt thêm plugin node-polyfill-webpack-plugin để có thể tương thích với các module của SDK.

Next.js​

Next.js là một framework để xây dựng trang web và ứng dụng web bằng React. Nó hỗ trợ cả kết xuất phía máy chủ cũng như kết xuất tĩnh. Cần một lượng cấu hình nhỏ để CSS của SDK hoạt động với Next.js.

Thêm phần sau vào tệp next.config.js của bạn. Điều này sẽ đảm bảo rằng CSS của SDK được tải đúng cách.

module.exports = {
  transpilePackages: [
    "@react-spectrum/avatar",
    "@react-spectrum/button",
    "@react-spectrum/checkbox",
    "@react-spectrum/dialog",
    "@react-spectrum/divider",
    "@react-spectrum/layout",
    "@react-spectrum/menu",
    "@react-spectrum/progress",
    "@react-spectrum/provider",
    "@react-spectrum/radio",
    "@react-spectrum/switch",
    "@react-spectrum/tabs",
    "@react-spectrum/text",
    "@react-spectrum/theme-default",
    "@react-spectrum/tooltip",
    "@react-spectrum/view",
  ],
};

Với Next.js 13.0.x hoặc thấp hơn​

Bạn sẽ cần cài đặt plugin Next.js bổ sung:

yarn add next-transpile-modules

Với cài đặt này, hãy thêm phần sau vào tệp next.config.js của bạn.

const withTM = require("next-transpile-modules")([
  "@react-spectrum/avatar",
  "@react-spectrum/button",
  "@react-spectrum/checkbox",
  "@react-spectrum/dialog",
  "@react-spectrum/divider",
  "@react-spectrum/layout",
  "@react-spectrum/menu",
  "@react-spectrum/progress",
  "@react-spectrum/provider",
  "@react-spectrum/radio",
  "@react-spectrum/switch",
  "@react-spectrum/tabs",
  "@react-spectrum/text",
  "@react-spectrum/theme-default",
  "@react-spectrum/tooltip",
  "@react-spectrum/view",
]);

module.exports = withTM({
  // Your Next.js configuration
});

Component​

Chúng tôi cung cấp các thành phần lớn trong một ứng dụng Chat bao gồm: