聊天UI Kit 反应

在几分钟内用 React 组件构建自己的聊天 UI .
来自聊天镜的Chat UI Kit是开发网络聊天应用程序的开源UI工具包.

厌倦了与粘性卷轴条的挣扎 满足性,反应性,cs黑客?
这是给你的! 见所有特性。 。 。 .

聊天用户界面 Kit 以曲速带给您聊天 UI 开发 🚀

演示

• 全功能聊天应用程序 : https://demo.chatscope.io (英语)
• 佐伊,阿坎,艾略特和乔: https://chatscope.io/demo/chat-friends (中文(简体) )
• 与火星人聊天(他有时有空): https://mars.chatscope.io (中文(简体) )

演示文稿索引 : https://chatscope.io/demo (英语)。 。 。 .

安装

构成部分库

使用线条 :

yarn add @chatscope/chat-ui-kit-react

使用 npm :

npm install @chatscope/chat-ui-kit-react

样式

使用线条 :

yarn add @chatscope/chat-ui-kit-styles

使用 npm :

npm install @chatscope/chat-ui-kit-styles

使用量

无害环境管理

import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  MessageInput,
} from "@chatscope/chat-ui-kit-react";

<div style={{ position: "relative", height: "500px" }}>
  <MainContainer>
    <ChatContainer>
      <MessageList>
        <Message
          model={{
            message: "Hello my friend",
            sentTime: "just now",
            sender: "Joe",
          }}
        />
      </MessageList>
      <MessageInput placeholder="Type message here" />
    </ChatContainer>
  </MainContainer>
</div>;

对! 你的第一个聊天GUI准备好了!

UMD 图像

UMD的用法在我们 故事书。 。 。 .

文档

检查一下我们的朋友 故事书。 。 。 .

字体

文库以Javascript写出,但自1.9.3版本起,打字机可以在包中提供.

另见

@ catascope/ use- 聊天器 是聊天应用程序中用于状态管理的反应钩子 .
看看这个,看看自己能有多容易做到聊天逻辑.

显示您的支持

如果你做了一个很棒的聊天UI 你喜欢这个图书馆,请 这个仓库!

社区和支助

• 通过旋转 @ 分镜
• 聊天时 解析器
• 脸书在 脸书
• 文章 聊天镜博客

网站

https://chatscope.io (英语)

许可证

麻省理工学院