Chat-React基於react的聊天會話元件

飛翔荷蘭人發表於2019-01-31
React會話元件

Chat-React

基於react的聊天會話元件 GitHub地址

chat-react
chat-react

演示

chat-react
chat-react

使用方法

  • 安裝
npm install chat-react
複製程式碼
  • 引入
import Chat from 'chat-react';
複製程式碼
  • 使用
export default class MyChat extends Component {
  state = {
    inputValue: '',
    messages: [],
    timestamp: new Date().getTime()
  }
  setInputfoucs = () => {
    this.chat.refs.input.inputFocus();  //set input foucus
  }
  setScrollTop = () => {
    this.chat.refs.message.setScrollTop(1200);  //set scrollTop position
  }
  sendMessage = (v) => {
    const {value} = v;
    if (!value) return;
    const {messages = []} = this.state;
    messages.push(v);
    this.setState({messages, timestamp: new Date().getTime(), inputValue: ''});
  }
  render() {
    const {inputValue, messages, timestamp} = this.state;
    const userInfo = {
      avatar: "http://img.binlive.cn/6.png",
      userId: "59e454ea53107d66ceb0a598",
      name: 'ricky'
    };
    return (
      <Chat
        ref={el => this.chat = el}
        className="my-chat-box"
        dataSource={messages}
        userInfo={userInfo}
        value={inputValue}
        sendMessage={this.sendMessage}
        timestamp={timestamp}
        placeholder="請輸入"
        messageListStyle={{width: '100%', height: window.outerHeight}}
      />
    );
  }
}
複製程式碼

API

屬性 & 方法 型別 描述
userInfo object 當前使用者資訊
value string 輸入框的內容
placeholder string 輸入框的佔位符
emoji any 定義emoji內容
customEmoticon array 自定義表情包
textareaChange (value) => {} 回撥函式,輸入框的內容變化時觸發，函式的第一個引數是當前輸入值
selectEmoje (emojeInfo) => {} 選擇一個emoji後的回撥函式，函式的第一個引數是選擇的emoje內容資訊
inputFocus func 子元件input的內建方法，用於設定input焦點 this.chat.refs.input.inputFocus()
dataSource array 訊息列表的資料內容
messageListStyle object 訊息列表的樣式，需要為列表設定一個固定的高度
timestamp number 資料來源發生變化時候設定的時間戳
timeBetween number 在指定時間間隔內顯示時間提示(單位:分鐘,預設值:5)
timeagoMax number 在指定時間範圍內顯示多長時間之前(單位:小時,預設值:24)
timeFormat string 自定義時間格式 (yyyy-MM-dd hh:mm)
loading bool 資料來源是否在載入中
loader node 自定義載入器
noData bool 是否沒有更多的資料了
noDataEle node 當沒有更多的資料時顯示自定義的元素節點
scrollOptions object 該引數使用了iscroll.js的 scrollbars 引數, 檢視 iscroll.js 文件
scrolltoUpper func 滾動條滾動到頂部時觸發的回撥函式
onScroll func 當滾動條滾動時觸發的回撥函式
avatarClick (value) => {} 使用者點選頭像觸發的回撥函式, 引數value為被點選使用者資訊
unreadCountChange func 未讀訊息變化時的回撥函式
setScrollTop setScrollTop(value) 子元件message的內建方法，用於設定滾動條位置 this.chat.refs.message.setScrollTop(1200)
元件引數描述
  • userInfo 你必須為這個引數定義userId和 avatar屬性,也可以新增一些你需要屬性。
userInfo = {
 avatar: 'http://example/avatar.jpg', //user avatar,  required parameters
 userId: '5bf7cf25a069a537ffe7c324', //user id,  required parameters
 name: 'rigcky',
 other: 'otherInfo'
}
複製程式碼
  • emoji 如果設定emoji引數為false,則不顯示emoji。如果你想新增更多的emoji,您可以設定這個引數為陣列，內容為你所新增的emoji。
// add more emoji
emoji = [
  {text: 'panda', content: '?'},
  {text: 'tiger', content: '?'},
  {text: 'pig', content: '?'}
]
複製程式碼
  • customEmoticon 自定義的表情包,引數為陣列型別
customEmoticon = [
 {text: 'smile', url: 'http://example/emoticon.png'},
 {text: 'angry', url: 'http://example/emoticon2.png'},
 {text: 'weep', url: 'data:image/png;base64,iVBORw0KGgoA...'}
]
複製程式碼
  • dataSource 訊息列表的資料來源,資料格式如下:
const customEmoticon = [{
    timestamp: 1545925494422,
    userInfo: {
        avatar: "http://example/2.png",
        name: "遊客1544365758856",
        userId: "1544365758856"
    },
    value: "hello~"
},  {
    timestamp: 1545925534218,
    userInfo: {
        avatar: "http://example/2.png",
        name: "遊客1544365758856",
        userId: "1544365758856"
    },
    value: "?",
    error: true //設定訊息狀態為失敗，顯示錯誤狀態圖示
}]
複製程式碼
  • messageListStyle 訊息列表的容器樣式，你必須為其設定一個固定的高度，保證其不會被內容撐開，例如{width: '100%', height: 500}
  • timestamp 當前dataSource的資料發生變化時候必須重新設定該引數為當前的時間戳
  • timeFormat 格式化時間引數，例如顯示2019-2-1 20: 20設定為yyyy-MM-dd hh:mm

相關文章