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: "我'你是——藍色泡泡！
  ],
  //...};//...

應用程式介面

• 聊天提要

• 訊息

• 聊天泡泡

• 泡泡集團

貢獻！

貢獻始終受到歡迎和鼓勵。如果您不想自己編寫功能請求，請讓您知道（在 Twitter 上或透過建立 Pull 請求），我會立即將這些內容編碼起來。

待辦事項

• 文件

• 文件

• 文件

發展

紗線開發