react chat ui

反应聊天用户界面

用于构建聊天 UI 的 React 组件库。

赞助

由 Pusher Chatkit 赞助：

特征

• 自动滚动到底部

• 超级容易使用

• 多用户分组（在演示中尝试一下）

请记住，该项目仍处于开发的早期阶段。如果您遇到错误或有功能请求，请在此处创建问题和/或向我发送推文。

安装

npm install react-chat-ui --save

基本用法

import { ChatFeed, Message } from 'react-chat-ui'// 你的代码内容...render() {

  return (// 您的 JSX...<ChatFeed messages={this.state.messages} // 数组：消息对象列表 isTyping={this.state.is_typing} // 布尔值：接收者是否正在输入 hasInputField={false} // Boolean：使用我们的输入，或使用您自己的 showSenderName // 显示发送消息的用户的名称 bubblesCentered={false} //Boolean 气泡是否应在 feed 中居中？自定义气泡样式 bubbleStyles={{ text: {fontSize: 30 }, chatbubble: {borderRadius: 70,padding: 40 }} }/>// 你的 JSX...

  )}

确保在类状态中保留正确的消息对象列表。就像这样：

 //...this.state = {
  messages: [new Message({ id: 1, message: "我是收件人！（与你交谈的人）",}), // Gray bubblenew Message({ id: 0, message: "我'你是——蓝色泡泡！" }), // 蓝色泡泡
  ],
  //...};//...

应用程序编程接口

• 聊天提要

• 信息

• 聊天泡泡

• 泡泡集团

贡献！¡1 ?

贡献始终受到欢迎和鼓励。如果您不想自己编写功能请求，请让您知道（在 Twitter 上或通过创建 Pull 请求），我会立即将这些内容编码起来。

待办事项

• 文档

• 文档

• 文档

发展

纱线开发